Ссылки меняются при наведении на кнопки главного меню?

Question

Ссылки меняются при наведении на кнопки главного меню?

0

Итак, у меня есть главный бар меню на моем веб-сайте и панель подменю внизу. Панель подменю в настоящее время не связана вообще с строкой главного меню (я имею в виду, что на любой странице, которая у вас есть, панель подменю одинаков).

Вот как это выглядит: (извините за уродливые навыки рисования)

Во всяком случае, я пытаюсь изменить ссылки в панели подменю, когда вы наведете одну из больших кнопок главного меню.

Это то, что я пробовал в своем html:

<div id = 'nav'>

    <div id = 'hovermenu1'>
        <a href="/accueil"><div class = 'button-accueil'></div></a>
            <div id = 'menu1'>  
                    <a href="">Link 1</a>

                    <a href="">Link 2</a>

                    <a href="">Link 3</a>

            </div>
    </div>

    <div id = 'hovermenu2'>
        <a href="/guide"><div class = 'button-guide'></div></a>
            <div id = 'menu2'>  
                    <a href="">Link 1</a>

                    <a href="">Link 2</a>

                    <a href="">Link 3</a>

            </div>
    </div>

    [...] <!-- And we go on like this until hovermenu6 -->


    <div id = 'hovermenu6'>
        <a href="/support"><div class = 'button-contact'></div></a>
            <div id = 'menu6'>  
                    <a href="">Link 1</a>

                    <a href="">Link 2</a>

                    <a href="">Link 3</a>

            </div>
    </div>
</div>

И в моем css:

#menu1 {
    background:url(/images/menu.jpg) no-repeat left top;
    text-align:center;
    display:none;
    float:left;
    margin-left:16px;
    margin-top:2px;
    padding-top:9px;
    width:700px;
    height:33px;
}

#menu2 {
    background:url(/images/menu.jpg) no-repeat left top;
    text-align:center;
    display:none;
    float:left;
    margin-left:16px;
    margin-top:2px;
    padding-top:9px;
    width:700px;
    height:33px;
}

    [...] /* And we go on like this until menu6 */


#menu6 {
    background:url(/images/menu.jpg) no-repeat left top;
    text-align:center;
    display:none;
    float:left;
    margin-left:16px;
    margin-top:2px;
    padding-top:9px;
    width:700px;
    height:33px;
}


#hovermenu1:hover #menu1 {
    display: inline;
}

#hovermenu2:hover #menu2 {
    display: inline;
}


    [...] /* And we go on like this until hovermenu6 */



#hovermenu6:hover #menu6 {
    display: inline;
}

Это, к сожалению, не работает.
Я понял, что это работает, когда я не закрыл все div id="hovermenu1/2/3/4/5/6 и закрыл их все внизу, но он все еще не работает должным образом. 6-я кнопка, он считает, что вы навешиваете все кнопки и пытается отобразить все меню.

Не могли бы вы помочь мне выяснить, что я делаю неправильно, и как я могу это исправить?

Большое вам спасибо, если кто-нибудь может мне помочь. Я застрял на этой вещи какое-то время!
С Уважением,
Orangow.

Orangow 08 янв. 2014, в 04:48

Источник

2

Просто для вашего стиля кода ... вы хотите использовать классы вместо идентификаторов. Это сэкономит вам много повторяющегося кода.
Anthony Weber 08 янв. 2014, в 03:47
0

Используйте JavaScript.
StackSlave 08 янв. 2014, в 03:47
0

как насчет использования плагина загрузочных вкладок ? Затем вы можете использовать jQuery hover, чтобы показать / скрыть нужные вкладки: $ ('# myTab'). Hover (function (e) {e.preventDefault (); $ (this) .tab ('show');}) или похожий - это непроверенный код!
thinkOfaNumber 08 янв. 2014, в 04:12

Показать ещё 1 комментарий

Теги:

php

html

css

hover

menu

1 ответ

Ещё вопросы

Просто для вашего стиля кода ... вы хотите использовать классы вместо идентификаторов. Это сэкономит вам много повторяющегося кода.
как насчет использования плагина загрузочных вкладок ? Затем вы можете использовать jQuery hover, чтобы показать / скрыть нужные вкладки: $ ('# myTab'). Hover (function (e) {e.preventDefault (); $ (this) .tab ('show');}) или похожий - это непроверенный код!

Brian H. · Answer 1 · 2014-01-08T02-27-00.000Z

Я бы просто ваш HTML и не пытаюсь привязать основные кнопки к подменю так же. Это не нужно. Вы можете просто сделать один div для каждого подменю и скрыть все из них, кроме того, который активен. Затем используйте JavaScript для захвата события зависания для каждого элемента главного меню и скрыть/показать подменю по мере необходимости. Например:

<div id="main1">Button</div><div id="main2">Button2</div><div id="main3">Button3</div>
<div id="sub1" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>
<div id="sub2" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>
<div id="sub3" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>

<script>
$(document).ready(function(){
   $('#main1').hover(function(){ $('#sub1').show(); $('#sub2').hide(); $('#sub3').hide(); }, 
                     function(){ $('#sub1').hide(); }
   $('#main2').hover(function(){ $('#sub2').show(); $('#sub1').hide(); $('#sub3').hide(); }, 
                     function(){ $('#sub2').hide(); }
   $('#main3').hover(function(){ $('#sub3').show(); $('#sub2').hide(); $('#sub1').hide(); }, 
                     function(){ $('#sub3').hide(); }
});
</script>

Это немного грязно, но, надеюсь, это имеет смысл и перемещает вас.