it-swarm.com.de

Übergeordnetes Menüelement nach dem Bewegen des Untermenüs (HTML/CSS/Jquery) markiert

Ich habe ein Menü mit der Möglichkeit, dass einige Menüpunkte Unterpunkte haben. Eigentlich ziemlich einfach. Ich möchte erreichen, dass nach dem Überfahren des Untermenüs auch der entsprechende (übergeordnete) Menüpunkt hervorgehoben wird. Dies passiert nie, weil es so aussieht, als ob der Mauszeiger das Menüelement verlässt und über das Untermenü gelangt, wobei der Browser seinen Standardstil verwendet. Jede Hilfe geschätzt! Danke vielmals!

Menü html: 

<div id="top_navigation">
        <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a>
                <ul class="submenu">
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li class="selected_menu_item"><a href="#">sub3</a></li>
                </ul>
            </li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
        </ul>
    </div>

CSS:

#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 23px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 312px;
    height: 64px;
    line-height: 64px;
    font-size: 20px;
    list-style: none;
}
#top_navigation ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #eb1f10;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation li li {
    height: 42px;
    line-height: 42px;
    border-top: #eb1f10 1px solid;
}

JS/Jquery:

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');
        },
        function() {
            $('ul', this).slideUp('fast');
        }
    );
});

Beispiel kann hier gefunden werden: http://jsfiddle.net/qguTz/

26
Fygo

Oh, jetzt weiß ich nicht, wie mir das nicht eingefallen ist ...

Es reicht aus, dies zu tauschen:

#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}

dafür:

#top_navigation ul li:hover > a {
    background-color: #eb1f10;
    color: #FFF;
}
87
Fygo

Um dies zu erreichen, benötigen Sie zwei kleine Modifikationen.

Der erste ist das CSS. Ich habe einen Selektor zu einer bereits vorhandenen Style-Deklaration hinzugefügt:

#top_navigation ul li a:hover, #top_navigation ul li a.hovered {
    background-color: #eb1f10;
    color: #FFF;
}

Dann habe ich die CSS geändert, um diese Klasse hinzuzufügen:

$nav.hover(
    function() {
        $(this).children('a').addClass('hovered')
        $('ul', this).stop(true, true).slideDown('fast');
    },
    function() {
        $(this).children('a').removeClass('hovered')
        $('ul', this).slideUp('fast');
    }
);

Dann hat alles geklappt! http://jsfiddle.net/qguTz/6/

4

http://jsfiddle.net/qguTz/10/

$nav.hover(
    function() {
        $('ul', this).stop(true, true).slideDown('fast');

        $('a',this).first().css({"background-color":"#eb1f10", "color":"#FFF"});
    },
    function() {

        $('ul', this).slideUp('fast');
       $('a',this).first().css({"background-color":"#FFF", "color":"#eb1f10"});
    }
0
kraysak