javascript - Showing underlying Link on mouseOver -


i searched bit , unable find answer suited question. albeit using z-index , absolute positioning seem work, doesn't.

what trying have menu slides left on mouseover, displaying underlying link... i've been trying work without success. tried using absolute positioning on cloned element place behind parent, didn't work. used z-index make sure clone behind parent well.

my code follows:

<ul id="nav">    <li><a href="#" data-slide-text="slide-aaa">aaa</a></li>    <li><a href="#" data-slide-text="slide-bbb">bbb</a></li </ul>    (function ($) { $.fn.doit = function () {           this.find('li')         .css({             overflow : 'auto'         })                    .hover(             function(){                 $(this).find('a:first').animate({                     marginleft : "-150px"                 }, 'fast')         },             function(){                 $(this).find('a:first').animate({                     marginleft : "0px"                 }, 'fast')                             })      this.find('a')         .each(function(){            var slidetext = $(this).data('slidetext');            $(this)                 .clone()                 .text(slidetext)                 .appendto($(this).parent())                 .addclass('slideclass')         }); }; })(jquery);

the css used is:

#nav li{    list-style: none;    float: left;    width: 150px;    height: 20px;    color: #cccccc;    height: 60px;    line-height: 30px;    text-align: center; }  #nav a{    position: relative;    display: block;    width: 150px;    z-index: 1;    background: #777777; }  .slideclass{    position: absolute;    left: 0;    top: 0;    display: block;    background: #000000;    color: #6699dd;    z-index: 3; }

you can see live example at: jquery slide menu

i have modified css in working fiddle

the key changes i've made css:

#nav li {   display: inline-block;   overflow: hidden !important;   white-space: nowrap; }

i removed height: declarations #nav li , position: related declarations .slideclass. finally, i've changed #nav a display: inline-block; well.


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

c# - Retrieve google contact -

i'm using .net retrieve contact info google contact. however, retrieves including sent email not stored in contact. there anyway can retrieve contact contact? here code requestsettings rs = new requestsettings("", email, password); rs.autopaging = true; contactsrequest cr = new contactsrequest(rs); feed<contact> contacts = cr.getcontacts(); foreach (contact contact in contacts.entries) { name name = contact.name; response.write(name.givenname + " " + name.familyname + "<br/>"); foreach (email emailid in contact.emails) { response.write(emailid.address + "<br/>"); } response.write("<br/>"); } im using google.gdata.contacts package nuget v 2.2.0 string redirecturi = "urn:ietf:wg:oauth:2.0:oob"; // build base oauth2 parameters var oauth2
Read more

javascript - How to insert selected radio button value into table cell -

i have 5 radio buttons <input type="radio" id="rating">1 <input type="radio" id="rating2">2 <input type="radio" id="rating3">3 <input type="radio" id="rating4">4 <input type="radio" id="rating5">5 i have 1 table <table id="mytabledata" border="1" style="width:100%"> <tr id="templaterow"> <th>ratings</th> </tr> </table> one add button <input type="button" id="add" value="add" onclick="addradiovalue()"> i've written code dynamically add rows table, when select radio button , click on add button, value of selected radio button should inserted new cell within table ratings. i able thing text box, i'm not able radio button. can me? your problems didn't have name set on radios , tryi
Read more