jQuery vertical Navigation -
i try adapt solution i've found on net. works in example. adaption doesn't work. hope can me.
in example i've found - there possible click li element , opens next ul (submenu). if click li element in same level (and if has subnavigation points) shows ul there , close ul open before. , on. in variation try adapt example - click on plus (a href="#") in js script , can't see same effect in example.
the example i've found:
http://jsfiddle.net/jtbowden/wgvum/
and adaption-try is:
$(function() { $('#resmenu').on('click', 'a[href="#"]', function() { $('#resmenu ul').hide(); var submenu = $(this).next('ul'); submenu.parentsuntil('#resmenu').andself().show(); }); });.topresponsive { height: 50px; line-height: 50px; } /* mainmenu */ nav { font-size: 14px; border: 1px solid #ffffff; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li { border-bottom: 1px solid #ffffff; text-transform: uppercase; background-color: #e6bfc4; display: block; line-height: 50px; } nav ul li { padding: 10px; color: #ffffff; } nav ul li .active { color: #000000; } nav ul li ul { display:none; padding: 0; margin: 0; } nav ul li ul li { border-bottom: none; border-top: 1px solid #707173; background-color: #ffffff; } nav ul li ul li { color: #707173; text-shadow: none; } nav ul li ul li .active { color: #000000; } nav ul li ul li ul { padding: 0; margin: 0; } nav ul li ul li ul li { line-height: 50px; border-bottom: none; border-top: 1px solid #707173; background-color: #e4e4e4; } nav ul li ul li ul li { font-size: 12px; padding: 5px 10px; color: #707173; text-shadow: none; } nav ul li ul li ul li .active { color: #000000; } span.navplus { background-color: #ddaeb5; border-left: 1px solid #ffffff; display: block; float: right; width: 50px; height: 50px; } span.navplus { padding: 0; } span.navminus { background-color: #ddaeb5; border-left: 1px solid #ffffff; display: block; float: right; width: 50px; height: 50px; } span.navplusgrau { background-color: #ffffff; border-left: 1px solid #707173; display: block; float: right; width: 50px; height: 50px; } span.navplusgrau { padding: 0; } span.navminusgrau { background-color: #ffffff; border-left: 1px solid #707173; display: block; float: right; width: 50px; height: 50px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="responsivemenu"> <div> <nav id="resmenu"> <div class="topresponsive"> <a href="#" class="close-panel"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/close.png" width="15"></a> </div> <ul> <li> <span class="navplus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusrosa.png"></a></span><a href="/index.php?id=2" title="pflege-produkte">pflege-produkte</a> <ul> <li><span class="navplusgrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusgrau.png"></a></span><a href="/index.php?id=6" title="gesichtspflege">gesichtspflege</a> <ul> <li><a href="/index.php?id=21" title="unreine haut, fettige haut">unreine haut, fettige haut</a> </li> <li><a href="/index.php?id=22" title="mischhaut">mischhaut</a> </li> <li><a href="/index.php?id=23" title="normale bis trockene haut">normale bis trockene haut</a> </li> <li><a href="/index.php?id=24" title="trockene haut">trockene haut</a> </li> </ul> </li> <li><a href="/index.php?id=7" title="reinigung">reinigung</a> </li> <li><a href="/index.php?id=8" title="tagespflege">tagespflege</a> </li> <li><a href="/index.php?id=9" title="nachtpflege">nachtpflege</a> </li> <li><a href="/index.php?id=10" title="augenpflege">augenpflege</a> </li> <li><a href="/index.php?id=11" title="anti-ageing-pflege">anti-ageing-pflege</a> </li> <li><a href="/index.php?id=12" title="lippenpflege">lippenpflege</a> </li> <li><a href="/index.php?id=13" title="handpflege">handpflege</a> </li> <li><span class="navplusgrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusgrau.png"></a></span><a href="/index.php?id=14" title="körperpflege">körperpflege</a> <ul> <li><a href="/index.php?id=25" title="empfindliche haut">empfindliche haut</a> </li> <li><a href="/index.php?id=26" title="trockene haut bis sehr trockene haut">trockene haut bis sehr trockene haut</a> </li> <li><a href="/index.php?id=27" title="trockene haut">trockene haut</a> </li> </ul> </li> <li><a href="/index.php?id=15" title="haarpflege">haarpflege</a> </li> <li><a href="/index.php?id=16" title="fusspflege">fusspflege</a> </li> <li><a href="/index.php?id=17" title="deodorants">deodorants</a> </li> <li><span class="navplusgrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusgrau.png"></a></span><a href="/index.php?id=18" title="spezialpflege">spezialpflege</a> <ul> <li><a href="/index.php?id=28" title="sehr trockene haut">sehr trockene haut</a> </li> <li><a href="/index.php?id=29" title="unreine haut">unreine haut</a> </li> </ul> </li> <li><span class="navplusgrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusgrau.png"></a></span><a href="/index.php?id=19" title="sonnenschutz">sonnenschutz</a> <ul> <li><a href="/index.php?id=30" title="sonnenschutz">sonnenschutz</a> </li> <li><a href="/index.php?id=31" title="selftan">selftan</a> </li> <li><a href="/index.php?id=32" title="hautschutz für kinder">hautschutz für kinder</a> </li> </ul> </li> <li><a href="/index.php?id=20" title="erkrankte haut">erkrankte haut</a> </li> </ul> </li> <li><span class="navplus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusrosa.png"></a></span><a href="/index.php?id=3" title="ihre haut">ihre haut</a> <ul> <li><span class="navplusgrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusgrau.png"></a></span><a href="/index.php?id=33" title="pflege nach hauttyp">pflege nach hauttyp</a> <ul> <li><a href="/index.php?id=38" title="unreine haut, fettige haut">unreine haut, fettige haut</a> </li> <li><a href="/index.php?id=39" title="mischhaut">mischhaut</a> </li> <li><a href="/index.php?id=40" title="normale bis trockene haut">normale bis trockene haut</a> </li> <li><a href="/index.php?id=42" title="trockene haut">trockene haut</a> </li> </ul> </li> <li><a href="/index.php?id=34" title="erkrankte haut">erkrankte haut</a> </li> <li><a href="/index.php?id=35" title="häufig gestellte fragen">häufig gestellte fragen</a> </li> <li><a href="/index.php?id=36" title="ihre fragen den dermatologen">ihre fragen den dermatologen</a> </li> <li><a href="/index.php?id=37" title="beratung in der apotheke">beratung in der apotheke</a> </li> </ul> </li> <li><span class="navplus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusrosa.png"></a></span><a href="/index.php?id=4" title="louis widmer">louis widmer</a> <ul> <li><a href="/index.php?id=43" title="vier grundsätze">vier grundsätze</a> </li> <li><a href="/index.php?id=44" title="porträt">porträt</a> </li> <li><a href="/index.php?id=45" title="imagefilm">imagefilm</a> </li> <li><a href="/index.php?id=46" title="botschafterin">botschafterin</a> </li> <li><a href="/index.php?id=47" title="international">international</a> </li> <li><a href="/index.php?id=48" title="apotheken mit louis widmer produkten">apotheken mit louis widmer produkten</a> </li> <li><a href="/index.php?id=49" title="mediencenter">mediencenter</a> </li> <li><a href="/index.php?id=50" title="jobs">jobs</a> </li> <li><a href="/index.php?id=51" title="downloads">downloads</a> </li> <li><a href="/index.php?id=52" title="links">links</a> </li> </ul> </li> <li><span class="navplus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/system/resources/public/images/plusrosa.png"></a></span><a href="/index.php?id=5" title="info center">info center</a> <ul> <li><a href="/index.php?id=53" title="kundendienst">kundendienst</a> </li> <li><a href="/index.php?id=54" title="aktuelle promotionen">aktuelle promotionen</a> </li> <li><a href="/index.php?id=55" title="newsletter">newsletter</a> </li> <li><a href="/index.php?id=56" title="downloads">downloads</a> </li> <li><a href="/index.php?id=57" title="wettbewerb">wettbewerb</a> </li> <li><a href="/index.php?id=58" title="betriebsführung">betriebsführung</a> </li> <li><a href="/index.php?id=59" title="produkt beurteilen">produkt beurteilen</a> </li> <li><a href="/index.php?id=60" title="produktmuster bestellen">produktmuster bestellen</a> </li> <li><a href="/index.php?id=61" title="mitteilung">mitteilung</a> </li> </ul> </li> </ul> </nav> </div> </div>it great if can me.
thank you
i've found solution own. here way solved less code different plugins.
$(document).ready(function(){ $('a.expand').click(function() { $(this.parentnode).children('ul').toggleclass('navshow'); $(this).toggleclass('reddisout'); }); });nav { font-size: 14px; border: 1px solid #ffffff; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li { border-bottom: 1px solid #ffffff; text-transform: uppercase; background-color: #e6bfc4; line-height: 50px; } nav ul li { color: #ffffff; display: inline-block; padding-left: 20px; } nav ul li a.reddis { background-image: url(../images/plusrosa.png); border-left: 1px solid #ffffff; display: block; float: right; width: 50px; height: 50px; padding-left: 0; } nav ul li a.reddisout { background-image: url(../images/minusrosa.png); border-left: 1px solid #ffffff; display: inline-block; width: 50px; height: 50px; padding-left: 0; } nav ul ul { display: none; padding: 0; margin: 0; } nav ul ul li { border-bottom: none; border-top: 1px solid #707173; background-color: #ffffff; } nav ul ul li { color: #707173; text-shadow: none; padding-left: 20px; } nav ul ul li a.reddis { background-image: url(../images/plusgrau.png); border-left: 1px solid #707173; display: block; float: right; width: 50px; height: 50px; } nav ul ul li a.reddisout { background-image: url(../images/minusgrau.png); border-left: 1px solid #707173; display: block; float: right; width: 50px; height: 50px; } nav ul ul li ul { display: none; padding: 0; margin: 0; } nav ul ul li ul li { line-height: 50px; border-bottom: none; border-top: 1px solid #707173; background-color: #e4e4e4; } nav ul ul li ul li { padding-left: 20px; color: #707173; text-shadow: none; } .navhide { display: none; } .navshow { display: block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <ul> <li><a>menu i</a></li> <li><a>menu ii</a></li> <li><a>menu iii</a><a class="expand reddis">x</a> <ul class="navhide"> <li><a>submenu 1</a></li> <li><a>submenu 2</a></li> <li><a>submenu 3</a><a class="expand reddis">x</a> <ul class="navhide"> <li><a>submenu 3a</a></li> <li><a>submenu 3b</a></li> <li><a>submenu 3c</a></li> </ul> </li> </ul> </li> <li><a>menu iv</a></li> <li><a>menu v</a><a class="expand reddis">x</a> <ul class="navhide"> <li><a>submenu 1</a></li> <li><a>submenu 2</a></li> <li><a>submenu 3</a><a class="expand reddis">x</a> <ul class="navhide"> <li><a>submenu 3a</a></li> <li><a>submenu 3b</a></li> <li><a>submenu 3c</a></li> </ul> </li> </ul> </li> </ul> </nav>$(document).ready(function() { $('a.expand').click(function() { $(this.parentnode).children('ul').toggleclass('navshow'); $(this).toggleclass('reddisout'); }); }); i hope answer helpfull. see next time.
Comments
Post a Comment