Dropdown menu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Dobrý den,

potřebuji udělat vertical dropdown menu. Mám následující kod:

<div class="menu_vlevo">
<h2></h2>
 <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>

<script>
$(document).ready(function(){
    $('li').click(function(){
        $(this).children('ul').toggle();
    });
});
</script>

<style>

.menu_vlevo
{
	float:left;
  padding:0px 0px 20px 0px; 
  min-height:250px; 
  width:25%;
  position:relative; 
}

.menu_vlevo ul
{
	  list-style: none;
    margin: 0;
    padding: 0;
} 

.menu_vlevo li 
{
	
    color: #00cccc; 
    padding: 4px 0px 8px 0px;
    text-decoration: none;
    list-style:none;
    
}

.menu_vlevo li a
{
	  display: inline-block;
    color: #00cccc; 
    padding: 4px 0px 8px 27px;
    text-decoration: none;
    list-style:none;
    
}

.menu_vlevo li a:hover
{
	  display: inline-block;
    color: #ff6600; 
    padding: 4px 0px 8px 27px;
    text-decoration: none;
    list-style:none;
    background:url('../img/linka_side.gif');
}


.menu_vlevo li ul
{
	display:none;
	padding-left:20px;
}



.menu_vlevo li li a
{
	line-height:120%;
	
}
</style>

Při kliku na položku, která rozbaluje, bych potřeboval, aby tam to rozbalené menu zůstalo. Funguje to, pokud mám adresu a rel="nofollow" href="" prázdnou, ale pokud začnu směrovat na stránku, kam má,tak se to přesměruje, což je logické, já vím. Máte někdo radu? Změnit strukturu menu?

Jakou radu? Trochu nechápu, o co ti jde. Aby menu zůstalo rozbalené i po přechodu na stránku? To se řeší na back-endu.

Ověříš adresu daného prvku v menu s aktuální adresou a pokud bude shodná, tak tam přidáš nějakou třídu, která menu rozbalí. Případně to můžeš vyřešit i v JS, protože se také dostaneš k adrese.

jak mas ten kod
 

$(document).ready(function(){
    $('li').click(function(){
        $(this).children('ul').toggle();
    });
});

Tak nejak podobne tam pridas zmenu className pro location.href
 

$(document).ready(function(){
    $('li').click(function(){
        $(this).children('ul').toggle();
    });
    $('li a').projitvsechny {odkaz} {
if (odkaz.href == location.href) ... odkaz.parentNode.parentNode.className = 'rozbalene';
}
});

Jak se to pise presne v jquery se mi nechce googlovat. Kazdopadne pro zanorene odkazy bude treba nastavit rozbaleni i pro vsechny nadrazene UL. (cili vsechny parentNode typu UL nebo v jquery mozna parent, parent.parent, ...)