FLOATING TEXT BOX OPENS WITH MOUSEOVER

FLOATING TEXT BOX OPENS WITH MOUSEOVER.

Με τον παρακάτω κώδικα μπορείτε να βαλετε ένα floating text box στην πλαϊνή μπάρα. Το text box μπορεί να περιέχει και linkls όπως παρακάτω. Μπορείτε να αλλάξετε τις διαστάσεις του πλάτους αλλάζοντας το width="720" που βρίσκεται στη 3^η γραμμή του κώδικα και τα πράσιν link των αναρτήσεων με τα δικά σας link. Δείτε πως λειτουργεί στο παρακάτω demo ▼.

<style>

ul, p1 {margin:0;padding:0;}

ul#lista {width:720px;margin:0px;padding:0;list-style: none;}

p1 {cursor:pointer;float:left;box-sizing:border-box;width:240px;height:37px;overflow:hidden;text-align:left;padding:5px;color:white;transition:all 0.3s;opacity:1;}

p1#box1 {background: #FFFFCC;position:relative;z-index:99;}

ul:hover p1:hover {position:relative;z-index:99;width:480px;height:auto;font:16px arial;opacity:1;border:1px solid #FF0000;}

</style>

<ul id="lista">

  <p1 id="box1"><a style="background:#FFFFCC;"><button style="font:bold 16px arial;background:#105105;color:#FFFF00;padding:5px;width:230px;">MY FLOATING LABELS ►</button></a>

<a href="https://the-best-widgets.blogspot.gr/search/label/SEO">Seo (7)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ?max-results=32" >Menu (35)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/TEXT BOXES">Text boxes 14</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/GALLERIES">Video & photo galleries (12)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG?max-results=32">Μορφοποίηση blog (34)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ?max-results=48">Ταξινόμηση αναρτήσεων (16)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS?max-results=48">Backgrounds (26)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ">Ενσωματώσεις (14)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS?max-results=32">Αλλα widgets (20)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG">Ασφάλεια blog (6)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS">Facebook (10)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/SOSIAL BUTTONS?max-results=32">Buttons & windows (22)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS">Image effects (18)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER">Σχόλια blogger (9)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ON LINE TOOLS">On line tools (16)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS?max-results=48">Slideshows (41)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES">Κυλιόμενα links, texts & images (12)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/POST SLIDER?max-results=48">Post sliders (6)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/CHRISTMAS WIDGETS">Christmas gadgets (10)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/CLOCKS AND CALENDARS">Clocks & calendars (7)</a>

<a href="https://the-best-widgets.blogspot.gr/search/label/COUNTERS">Counters (7)</a>

</p1></ul>