Нужна помощь, чтобы построить верхнее меню

Question

Нужна помощь, чтобы построить верхнее меню

0

Мне нужно создать верхнее меню, подобное этому: http://delaespada.com

Здесь, где я нахожусь:

HTML

<div class="wrap">                
    <div id="panel1">
        <h1>PANEL1</h1>
    </div>
    <div id="panel2">
        <h1>PANEL2</h1>
    </div>
    <div id="panel3">
        <h1>PANEL3</h1>
    </div>
    <div id="panel4">
        <h1>PANEL4</h1>
    </div>
    <div id="panel5">
        <h1>PANEL5</h1>
    </div>
 </div><!--end wrap-->

<ul class="nav">
    <li><a class="1" href="#">link1</a></li>
    <li><a class="2" href="#">link2</a></li>
    <li><a class="3" href="#">link3</a></li>
    <li><a class="4" href="#">link4</a></li>
    <li><a class="5" href="#">link5</a></li>
</ul>

Jquery

$(document).ready(function(){

            $("a.1").click(function(event){
                event.preventDefault();
                $("#panel2").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel1").css({height:150,top:20});
            });

            $("a.2").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel2").css({height:150,top:20});
            });

            $("a.3").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel2").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel3").css({height:150,top:20});
            });

            $("a.4").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel2").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel4").css({height:150,top:20});
            });

            $("a.5").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel2").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:150,top:20});
            });

            $(".wrap").mouseleave(function(){setTimeout(function(){$("#panel1, #panel2, #panel3, #panel4, #panel5").css({height:0,top:-500})},2000);
            });

        });

Есть ли способ упростить код jquery?

Иногда функция setTimeOut работает странно, что я делаю неправильно? и мне также нужен способ остановить функцию setTimeOut, когда мышь вернулась в панель.

Пожалуйста, посмотрите http://jsfiddle.net/aPzSP/1/

заранее спасибо

user3094954 13 дек. 2013, в 22:30

Источник

Теги:

jquery

4 ответа

0

Проверь это. Вы можете показывать и скрывать панели с помощью jQuery без ручной настройки высоты и всего и с помощью анимации CSS.

HTML

<div class="wrap">                
    <div id="panel1" class="panel">
        <h1>PANEL1</h1>
    </div>
    <div id="panel2" class="panel">
        <h1>PANEL2</h1>
    </div>
    <div id="panel3" class="panel">
        <h1>PANEL3</h1>
    </div>
    <div id="panel4" class="panel">
        <h1>PANEL4</h1>
    </div>
    <div id="panel5" class="panel">
        <h1>PANEL5</h1>
    </div>
 </div><!--end wrap-->

<ul class="nav">
    <li><a class="1" href="javascript:void(0)" onclick="showPanel('panel1')">link1</a></li>
    <li><a class="2" href="javascript:void(0)" onclick="showPanel('panel2')">link2</a></li>
    <li><a class="3" href="javascript:void(0)" onclick="showPanel('panel3')">link3</a></li>
    <li><a class="4" href="javascript:void(0)" onclick="showPanel('panel4')">link4</a></li>
    <li><a class="5" href="javascript:void(0)" onclick="showPanel('panel5')">link5</a></li>
</ul>

JS - Все, что вам нужно, это функция

function showPanel(elem){

    if ($(".panel.active").length){ //checks for open panels
        $(".panel.active").removeClass("active").slideUp(function(){
            $("#" + elem).addClass("active").slideDown() //opens panel after other panel is closed
        });
    }else{
        $("#" + elem).addClass("active").slideDown() //opens panel if no other open panels
    }
}

http://jsfiddle.net/g9LUX/1/

tedski 13 дек. 2013, в 18:31

0

Вы можете упростить его так:

$("a").click(function (event) {
  $(".wrap div").css({height:0,top:-500});
  $("#panel" + $(this).attr("class")).css({height:150,top:20});
});

$(".wrap").mouseleave(function(){
    setTimeout(function(){
        $(".wrap div").css({height:0,top:-500});
    },2000); 
});

Sadako 13 дек. 2013, в 17:59

-1

Попробуй это:

$(document).ready(function () {
    $("a").click(function (event) {
        event.preventDefault();
        $("div[id^=panel").css({height: 0,top: -500});
        $("#panel" + this.className).css({height: 150,top: 20});
    });
    var timer;
    var restore = function () {
        timer = setTimeout(function () {
            $("div[id^=panel").css({height: 0,top: -500});
        }, 500);
    }
    $(".wrap").on('mouseleave', restore);
    $(".wrap").on('mouseenter', function () {
        clearTimeout(timer)
    });
});

демонстрация

Sergio 13 дек. 2013, в 19:19

0

Почему отрицательный голос?
Sergio 13 дек. 2013, в 21:19

Ещё вопросы

PSL · Accepted Answer · 2013-12-13T18-07-00.000Z

Вы можете упростить его таким образом:

HTML:

Дайте общую panel классов всем панелям
Дайте общий класс ссылкам меню menuLink
Для ссылок меню укажите href как идентификатор своей целевой панели.

Источник:

<div class="wrap">
    <div id="panel1" class="panel">
         <h1>PANEL1</h1>

    </div>
    <div id="panel2" class="panel">
         <h1>PANEL2</h1>

    </div>
    <div id="panel3" class="panel">
         <h1>PANEL3</h1>

    </div>
    <div id="panel4" class="panel">
         <h1>PANEL4</h1>

    </div>
    <div id="panel5" class="panel">
         <h1>PANEL5</h1>

    </div>
</div>
<!--end wrap-->
<ul class="nav">
    <li><a class="menuLink" href="#panel1">link1</a>

    </li>
    <li><a class="menuLink" href="#panel2">link2</a>

    </li>
    <li><a class="menuLink" href="#panel3">link3</a>

    </li>
    <li><a class="menuLink" href="#panel4">link4</a>

    </li>
    <li><a class="menuLink" href="#panel5">link5</a>

    </li>
</ul>

JS:

$(document).ready(function () {
    var timeout, $panel = $('.panel');
    //Just bind event handler once
    $(".menuLink").click(function (event) { 
        event.preventDefault();
        //Clear any timeout if clicked withing 2 sec after hovering out of wrap
        clearTimeout(timeout);

        //get the target element reading the href and set its css
        var $target = $(this.getAttribute('href')).css({
            height: 150,
            top: 20
        });
        //Do for all panels but the target.
        $panel.not($target).css({
            height: 0,
            top: -500
        });
    });
    $(".wrap").mouseleave(function () {
        timeout = setTimeout(function () {
            $panel.css({
                height: 0,
                top: -500
            })
        }, 2000);
    });
});

демонстрация

Огромное спасибо за это. Есть идеи о том, как вернуть мышь на «обтекание» и отменить функцию setTimeOut?
@ user3094954 Проблема с вашим тайм-аутом может быть из-за того, что он не сбрасывается, даже если вы щелкнете по нему еще раз. Таким образом, вы можете очистить тайм-аут в обработчике кликов.
Вы можете установить cleartimeout для события mouseenter в .wrap. ты это имел ввиду?
Это решило мою проблему. Спасибо.