javascript - Creating menu with jQuery -
<li><div class="link" id="contentlink1"><a href="link1.html" target="_blank">link 1</a></div></li> <li><div class="link" id="contentlink2"><a href="link2.html" target="_blank">link 2</a></div></li>
i generating these links through db , want add link2
within link1
create nested navigation have inject jquery create nested navigation.
for have tried grab link2
html , put after link1
html did not work. can or suggest solutions can create nested navigation through jquery.
var link2 = $('#link2').parent().html(); var link1 = $('link').after(); link1 = link2; console.log(link1);
i playing around see weather link2
contents copied inside link1
html content did not work.
you can check fiddle. have add css though. also, not sure why adding link inside div, doesn't seem necessary me. [updated code snippet smoother effect on mouseenter/leave , added css]
$('#contentlink1').on({ mouseenter: function() { $('.submenu').css('display', 'flex'); }, mouseleave: function() { $('.submenu').css('display', 'none'); } }); $('.submenu').append('<li><div class="link" id="contentlink2"><a href="link2.html" target="_blank">link 2</a></div></li>');
.submenu { display: none; list-style: none; width: 100%; margin: 0px; padding: 0px; z-index: 10; } .submenu li .link { background-color: #ccc; } .link { background-color: #000; width: 80px; text-align: center; } { color: #fff; text-decoration: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <div class="link" id="contentlink1"> <a id="link1" href="link1.html" target="_blank">link 1</a> <ul class="submenu"> </ul> </div> </li>
Comments
Post a Comment