jQuery Hover Раскрывающееся меню Размер полной ширины

Question

jQuery Hover Раскрывающееся меню Размер полной ширины

0

У меня есть вертикальное меню на моем веб-сайте. Теперь мне нужна выпадающая система в некоторых ссылках.
Я вижу этот пример в Интернете: http://jsfiddle.net/4jxph/3018/ Но я хочу подменю полной ширины. Систему развертывания Sony - вот что я хочу. Выпадающая система от Sony: Sony. Я всегда искал раскрывающееся меню ширины.
Мой код: http://www.jsfiddle.net/3aK9k/4.
Итак, что я хочу, когда я нахожу content поэтому подменю и снова ссылку меню, которая slidingown подменю, чем подменю, должны быть там без некоторых ходов.

Надеюсь, я объясню, что я хочу делать. Я думаю, что это возможно, но это переполнило мои знания JS и jQuery.

Может ли кто-нибудь сказать мне, как это сделать?

Trevor 02 март 2014, в 03:59

Источник

0

Что ты имеешь в виду под некоторыми шагами ?
Zword 04 март 2014, в 09:42
0

Еще один вопрос - хотите ли вы получить точный вывод в sony.de ссылки на sony.de ?
Zword 04 март 2014, в 09:58
0

@Zword Слово с "без некоторых движений", я хочу сказать, что у контента нет анимации.
user2615031 04 март 2014, в 10:26
0

Я хочу эту точную пропорцию выпадающему меню Sony, это не обязательно должен быть тот же код. @Zword
user2615031 04 март 2014, в 10:29
0

Значит, вы не хотите анимацию скольжения?
Zword 04 март 2014, в 10:31
0

Мне нужна анимация slideDown для Контейнера при наведении ссылки. Когда вы наводите Контейнер и возвращаетесь к ссылке, которая показывает Контейнер, тогда Контейнер не должен снова иметь эффект slideDown.
user2615031 04 март 2014, в 10:38
0

Проверьте мой ответ и скажите, нужны ли какие-либо изменения
Zword 04 март 2014, в 11:42

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

drop-down-menu

5 ответов

1

Я сделал скольжение в скрипке, которая работает точно так же, как sony.de:

Обновленный скрипт (новый)

HTML

<div id="menu">
<ul>
    <div id="mainMenu">
    <li class="menu1">Home</li>
    <li class="menu2">DropDown1</li>
    <li class="menu3">DropDown2</li>
    </div>
</ul>
    <div class="submenu menu2">
        <!--menu items-->
    </div>
    <div class="submenu menu3">
        <!--menu items-->
    </div>
</div>

CSS

html,body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
#menu{
    position:relative;
    width:100%;
    height:80px;
    font-family:sans-serif;
}
#menu,#menu ul,#menu>ul>#mainMenu>li,#menu div{
    display:inline-block;
    margin-top:0px;
}
#menu >ul {
    position:absolute;
    top:0px;
    z-index:100;
    list-style:none;
    padding:0px;
    font-size:18px;
    height: 80px;
    width: 100%;
    background: none repeat scroll 0% 0% #FFA500;
}
#menu ul>#mainMenu>li{
    padding: 29px;
}
#menu ul>#mainMenu>li:hover{
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all 0.2s ease 0s;
}
#menu .submenu{
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:white;
    border:1px solid black;
}

JQuery

var preClass="";
$('#menu>ul>#mainMenu>li').hover(function(){
    var curClass = $(this).attr('class');
    if(preClass!=curClass){
        $('.submenu[class*='+preClass+']').stop()
    .animate({'bottom':'0px'});
        $('.submenu[class*='+curClass+']').stop()
    .animate({'bottom':''+(-$('div[class*='+curClass+']').height())+'px'});}
    preClass=curClass;
});

$('#mainMenu').mouseleave(function(){
    preClass="";
    setTimeout(function(){
    if(preClass=="")
    $('.submenu').stop().animate({'bottom':'0px'});
    },350);
});

$('#menu').mouseleave(function(){
    preClass=""
    $('.submenu').stop().animate({'bottom':'0px'});
});

$('.submenu').hover(function(){
    preClass = $(this).attr('class').replace("submenu ","");
    $(this).css({'bottom':''+(-$(this).height())+'px'});
},
function(){
    if(preClass!=curClass){
    $(this).stop().animate({'bottom':'0px'});
    }
});

Скрипт с задержкой добавлен как `sony.de`

Zword 04 март 2014, в 10:11

0

Это то, что я имею в виду, наведите курсор на контент и наведите ссылку на слайд вниз контента. Контейнер снова скользит вниз, так быть не должно
user2615031 04 март 2014, в 15:43
0

Просто поясните, что вы подразумеваете под «контентом», «ссылкой» и «контейнером» в приведенном выше комментарии.
Zword 04 март 2014, в 16:50
0

Вы хотите это как jsfiddle.net/Zword/Hd6cu/1 ?
Zword 04 март 2014, в 17:22
0

да, вы можете добавить слайд (350)?
user2615031 04 март 2014, в 18:23
0

скольжение (350) когда?
Zword 04 март 2014, в 18:27
0

когда вы покидаете контейнер или ссылку. Ваша функция должна работать так: / jsfiddle.net/3aK9k/25
user2615031 04 март 2014, в 18:36
0

@Selfproblemmade ок, скоро выложу обновление
Zword 04 март 2014, в 18:38
0

посмотрите на ссылку, я изменил скрипку
user2615031 04 март 2014, в 18:41
1

@Selfproblemmade проверьте новую скрипту в моем ответе. Скажите, работает ли он для вас. Если он работает, я обновлю свой ответ в соответствии с новым кодом скрипты
Zword 05 март 2014, в 05:32
0

ЭТО ОЧЕНЬ ХОРОШО, первая скрипка - это то, чего я точно хочу. Вы что-то изменили в CSS? И что-то не так ... :( При наведении мыши на ссылку «Раскрывающийся список» и наведите курсор мыши на другую ссылку, контейнер перемещается вниз, но при повторном выполнении действия эффект скольжения отсутствует
user2615031 05 март 2014, в 13:04
0

@Selfproblemmade Я действительно не понимаю, когда вы хотите слайд-слайд-слайд и когда вы этого не сделаете. Если это ясно, я, безусловно, могу внести изменения, которые дадут желаемый результат
Zword 05 март 2014, в 15:43
0

@Selfproblemmade, вы сами сказали в первом комментарии, что контейнер не должен снова скользить вниз
Zword 05 март 2014, в 16:19
1

Просто скажите мне, по On switch links do you want slide down? - да или нет
Zword 05 март 2014, в 16:22
0

Это действительно выглядит так, как будто я этого хочу, но когда я перехожу с одной ссылки на другую с помощью мыши, содержимое контейнера меняется и контейнер перемещается вниз, но если я сделаю это снова, он больше не будет скользить вниз. Я хочу слайд-даун и слайд-ап, ДА!
user2615031 05 март 2014, в 16:24
0

@Selfproblemmade, но так оно и отображается в самой первой скрипке
Zword 05 март 2014, в 16:28
1

@Selfproblemmade хорошо, я попробую еще одну скрипку, исходя из того, что я понял. Думаю, это будет скрипка, которую вы хотите
Zword 05 март 2014, в 16:31
0

новая скрипка была в порядке jsfiddle.net/Zword/Fg2p2/1 , но я хочу, чтобы эффект слайда уменьшился, когда вы наводите другую ссылку, а не на ту же.
user2615031 05 март 2014, в 16:34
0

давайте продолжим это обсуждение в чате
user2615031 05 март 2014, в 16:35
1

@Selfproblemmade проверьте мой новый ответ с новыми добавленными скрипками
Zword 05 март 2014, в 19:28
0

Вот и все, чувак, я знаю, ты меня ненавидишь :) потому что это заняло так много времени.
user2615031 05 март 2014, в 19:51
0

Нет @ Самостоятельная проблема, я не ненавижу тебя. Всегда рады помочь
Zword 06 март 2014, в 02:55

Показать ещё 19 комментариев

0

Проверьте свой код jSFiddle

Загрузите файл кода из Box

Код HTML

<ul id="nav_menu">
    <li><a class="nav_menu_link">Home</a></li>
    <li class="nav_menu_link_drop_1">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" style="display: none;">  
            <ul id="file_menu">
                <li><a href="#file">File</a></li>
                <li><a href="#edit">Edit</a></li>
                <li><a href="#view">View</a></li>
                <li><a href="#insert">Insert</a></li>
                <li><a href="#modify">Modify</a></li>
                <li><a href="#control">Control</a></li>
                <li><a href="#debug">Debug</a></li>
                <li><a href="#window">Window</a></li>
                <li><a href="#help">Help</a></li>
            </ul>
        </div>
    <li class="nav_menu_link_drop_2">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" style="display: none;">
            <ul id="file_menu">
                <li><a href="#file">2 File</a></li>
                <li><a href="#edit">2 Edit</a></li>
                <li><a href="#view">2 View</a></li>
                <li><a href="#insert">2 Insert</a></li>
                <li><a href="#modify">2 Modify</a></li>
                <li><a href="#control">2 Control</a></li>
                <li><a href="#debug">2 Debug</a></li>
                <li><a href="#window">2 Window</a></li>
                <li><a href="#help">2 Help</a></li>
            </ul>
    </div>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Код CSS

* {   
margin: 0;
padding: 0;
}
#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: black;
    font-size: 18px;
    height: 0;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_link:hover .arrow.down {
    border-top-color: #FFF;
}

#content1:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content1, #content2 {
    width: 100%;
    height: auto;
    background: gray;
    display: none;
    position: absolute;
}

#file_menu {
    border: 1px solid #1c1c1c;
}

#file_menu li {
    width: 100%;
    height: 30px;
    background-color: #302f2f;
}

#file_menu li a {
    font-family: Arial;
    font-size: 14px;
    color:#FFFFFF; 
    font-weight: bold;
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
}

#file_menu li a:hover {
    color: #F00880;
}

JQuery

var link1 = $(".nav_menu_link_drop_1");
var link2 = $(".nav_menu_link_drop_2");
var content1 = $('#content1');
var content2 = $('#content2');

$(link1).hover(
    function(){ 
        $(content1).slideDown(350);
    },
    function(){
        $(content1).slideUp(350);
    }
);

$(link2).hover(
    function(){ 
        $(content2).slideDown(350);
    },
    function(){
        $(content2).slideUp(350);
    }
);

Jay Patel 04 март 2014, в 10:21

0

Это выглядит довольно хорошо, но при наведении на подменю и наведении на ссылку, которая скользит вниз по подменю, контейнер должен быть постоянным
user2615031 04 март 2014, в 12:52
0

Предполагая, что вы измените .nav_menu_link_drop_1 и 2 на .nav_menu_link_drop, вы можете просто сделать $ ('. Nav_menu_link_drop'). Next (). SlideToggle (); Вам не нужно писать один и тот же код два раза.
enguerranws 04 март 2014, в 14:50

0

Вы можете добиться этого только с помощью CSS. Чище, проще.

Живая демо здесь: http://jsfiddle.net/4jxph/3031/

Здесь измененный CSS:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#container {
    margin: auto;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}
#button:hover .file_menu {
    max-height: 100000px; 
    opacity: 1;
}
ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

.file_menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    width:100%;
    border: 1px solid #1c1c1c;
    transition: all .2s;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

Потому что вы этого хотите, здесь решение JS (более чистый, чем другой ответ):

var link = $("li[class^=nav_menu_link_drop]");

$(link).hover(

    function(){ 
        var content = $(this).next('div[id^="content"]');
        $(content).stop(true).slideDown(350);
    },
    function(){
         var content = $(this).next('div[id^="content"]');
         $(content).delay(350).slideUp(350);


    }
);

Это делает работу? http://jsfiddle.net/3aK9k/27/

enguerranws 04 март 2014, в 10:02

0

я хочу подменю в 100% ширине
user2615031 04 март 2014, в 13:55
0

Это 100% ширины окна. Хм, нет, вы правы, я думаю, я забыл сохранить: посмотреть его там> jsfiddle.net/4jxph/3031
enguerranws 04 март 2014, в 14:47
0

Да, извините, я думал, что дал вам последнюю версию: jsfiddle.net/4jxph/3031
enguerranws 04 март 2014, в 14:53
0

но я хочу анимацию slideDown (350) и slideUp (350), отображая подменю !! Когда вы добавите это, вы получите награду
user2615031 04 март 2014, в 14:56
0

Это легко с CSS переходами. Я на этом.
enguerranws 04 март 2014, в 14:57
0

Там: jsfiddle.net/4jxph/3033 (не стесняйтесь снимать эффект непрозрачности)
enguerranws 04 март 2014, в 15:04
0

да, ты чувствуешь себя хорошо ^^
user2615031 04 март 2014, в 15:05
0

Вы можете добавить задержку? оставив мышь
user2615031 04 март 2014, в 15:10
0

Я думаю, что мы не можем сделать это в чистом CSS.
enguerranws 04 март 2014, в 15:12
0

Итак, хорошо, я попробовал ваш CSS в этом: jsfiddle.net/t3ADE Но это не работает .. :( Почему?
user2615031 04 март 2014, в 15:38
0

Потому что это не то, что я вам сказал :) Смотрите, больше нет JS: jsfiddle.net/3aK9k/24
enguerranws 04 март 2014, в 15:56
0

Зачем кому-то для этого нужен JS?
enguerranws 05 март 2014, в 11:05
0

Прочитайте тему моего вопроса и моего запроса, добавив награду
user2615031 05 март 2014, в 16:29
0

Отредактировал мой ответ с помощью чистого решения JS.
enguerranws 05 март 2014, в 17:35
0

нет это слишком много ошибок
user2615031 05 март 2014, в 17:41
0

Ошибки? Какие ошибки? Между прочим: вы не спросили четко, что вы ищете, вы не разместили ни одного кода в своем вопросе (как того требуют инструкции SO), поэтому вы должны быть рады, что кто-то ответит вам :)
enguerranws 05 март 2014, в 17:43

Показать ещё 14 комментариев

0

Если бы я понял, что вам не нужна анимация, для этого просто установите время анимации .stop() 0. Вам не нужно использовать .stop() и вам следует подумать об использовании .hover() вместо mouseenter и mouseleave. Вот ссылка: http://api.jquery.com/hover/

Пример:

$(link1).hover(
    function(){ 
        $(content1).slideDown(0);
    },
    function(){
        $(content1).slideUp(0);
    }
);

Вот ваша скрипка с обновленным кодом: http://jsfiddle.net/3aK9k/2/

EDIT: Я только что заметил, но у вас есть недопустимый html, ваш div -tag находится внутри ul -tag. Положите его в свой li... seriosly ПРОВЕРЬТЕ свою разметку... это не единственная неправильная вещь, которую я заметил...

EDIT: Uhm... ОК... может быть, вам следует пересмотреть ваш подход, только потому, что он работает, вы не должны использовать недопустимый html

Ekusu 02 март 2014, в 01:23

0

Выглядит довольно хорошо. Но когда я наведу ссылку в первый раз, тогда контент будет иметь продолжительность (350). При наведении курсора на содержимое и наведении ссылки снова не должно быть никакой продолжительности слайддауна или даже анимации. Я добавил продолжительность анимации, но она должна применяться только при первом наведении на ссылку: jsfiddle.net/3aK9k/4
user2615031 02 март 2014, в 11:02
0

http://jsfiddle.net/3aK9k/8/ ты имеешь в виду что-то подобное? Но, как я уже сказал, вы должны проверить свою разметку и принять другой подход!
Ekusu 03 март 2014, в 02:53
0

ваш код скрипки тот же, что вы называете в своем ответе, разницы нет. Пожалуйста, прочитайте требование моего Вопроса и мой комментарий к вашему ответу.
user2615031 03 март 2014, в 10:14

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

Ещё вопросы

Что ты имеешь в виду под некоторыми шагами ?
Еще один вопрос - хотите ли вы получить точный вывод в sony.de ссылки на sony.de ?
@Zword Слово с "без некоторых движений", я хочу сказать, что у контента нет анимации.
Я хочу эту точную пропорцию выпадающему меню Sony, это не обязательно должен быть тот же код. @Zword
Значит, вы не хотите анимацию скольжения?
Мне нужна анимация slideDown для Контейнера при наведении ссылки. Когда вы наводите Контейнер и возвращаетесь к ссылке, которая показывает Контейнер, тогда Контейнер не должен снова иметь эффект slideDown.
Проверьте мой ответ и скажите, нужны ли какие-либо изменения
Это то, что я имею в виду, наведите курсор на контент и наведите ссылку на слайд вниз контента. Контейнер снова скользит вниз, так быть не должно
Просто поясните, что вы подразумеваете под «контентом», «ссылкой» и «контейнером» в приведенном выше комментарии.
Вы хотите это как jsfiddle.net/Zword/Hd6cu/1 ?
когда вы покидаете контейнер или ссылку. Ваша функция должна работать так: / jsfiddle.net/3aK9k/25
@Selfproblemmade ок, скоро выложу обновление
посмотрите на ссылку, я изменил скрипку
@Selfproblemmade проверьте новую скрипту в моем ответе. Скажите, работает ли он для вас. Если он работает, я обновлю свой ответ в соответствии с новым кодом скрипты
ЭТО ОЧЕНЬ ХОРОШО, первая скрипка - это то, чего я точно хочу. Вы что-то изменили в CSS? И что-то не так ... :( При наведении мыши на ссылку «Раскрывающийся список» и наведите курсор мыши на другую ссылку, контейнер перемещается вниз, но при повторном выполнении действия эффект скольжения отсутствует
@Selfproblemmade Я действительно не понимаю, когда вы хотите слайд-слайд-слайд и когда вы этого не сделаете. Если это ясно, я, безусловно, могу внести изменения, которые дадут желаемый результат
@Selfproblemmade, вы сами сказали в первом комментарии, что контейнер не должен снова скользить вниз
Просто скажите мне, по On switch links do you want slide down? - да или нет
Это действительно выглядит так, как будто я этого хочу, но когда я перехожу с одной ссылки на другую с помощью мыши, содержимое контейнера меняется и контейнер перемещается вниз, но если я сделаю это снова, он больше не будет скользить вниз. Я хочу слайд-даун и слайд-ап, ДА!
@Selfproblemmade, но так оно и отображается в самой первой скрипке
@Selfproblemmade хорошо, я попробую еще одну скрипку, исходя из того, что я понял. Думаю, это будет скрипка, которую вы хотите
новая скрипка была в порядке jsfiddle.net/Zword/Fg2p2/1 , но я хочу, чтобы эффект слайда уменьшился, когда вы наводите другую ссылку, а не на ту же.
давайте продолжим это обсуждение в чате
@Selfproblemmade проверьте мой новый ответ с новыми добавленными скрипками
Вот и все, чувак, я знаю, ты меня ненавидишь :) потому что это заняло так много времени.
Нет @ Самостоятельная проблема, я не ненавижу тебя. Всегда рады помочь
Это выглядит довольно хорошо, но при наведении на подменю и наведении на ссылку, которая скользит вниз по подменю, контейнер должен быть постоянным
Предполагая, что вы измените .nav_menu_link_drop_1 и 2 на .nav_menu_link_drop, вы можете просто сделать $ ('. Nav_menu_link_drop'). Next (). SlideToggle (); Вам не нужно писать один и тот же код два раза.
Это 100% ширины окна. Хм, нет, вы правы, я думаю, я забыл сохранить: посмотреть его там> jsfiddle.net/4jxph/3031
Да, извините, я думал, что дал вам последнюю версию: jsfiddle.net/4jxph/3031
но я хочу анимацию slideDown (350) и slideUp (350), отображая подменю !! Когда вы добавите это, вы получите награду
Это легко с CSS переходами. Я на этом.
Там: jsfiddle.net/4jxph/3033 (не стесняйтесь снимать эффект непрозрачности)
Вы можете добавить задержку? оставив мышь
Я думаю, что мы не можем сделать это в чистом CSS.
Итак, хорошо, я попробовал ваш CSS в этом: jsfiddle.net/t3ADE Но это не работает .. :( Почему?
Потому что это не то, что я вам сказал :) Смотрите, больше нет JS: jsfiddle.net/3aK9k/24
Прочитайте тему моего вопроса и моего запроса, добавив награду
Отредактировал мой ответ с помощью чистого решения JS.
Ошибки? Какие ошибки? Между прочим: вы не спросили четко, что вы ищете, вы не разместили ни одного кода в своем вопросе (как того требуют инструкции SO), поэтому вы должны быть рады, что кто-то ответит вам :)
Выглядит довольно хорошо. Но когда я наведу ссылку в первый раз, тогда контент будет иметь продолжительность (350). При наведении курсора на содержимое и наведении ссылки снова не должно быть никакой продолжительности слайддауна или даже анимации. Я добавил продолжительность анимации, но она должна применяться только при первом наведении на ссылку: jsfiddle.net/3aK9k/4
http://jsfiddle.net/3aK9k/8/ ты имеешь в виду что-то подобное? Но, как я уже сказал, вы должны проверить свою разметку и принять другой подход!
ваш код скрипки тот же, что вы называете в своем ответе, разницы нет. Пожалуйста, прочитайте требование моего Вопроса и мой комментарий к вашему ответу.

Trevor · Accepted Answer · 2014-03-04T22-34-00.000Z

HTML

    <ul id="nav_menu">
    <li><a class="nav_menu_link nav">Home</a></li>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" class="content" style="display: none;">
            <ul style="padding: 20px; height: auto;">
                <li><a href="#">Item1</a></li><br />
                      <li><a href="#">Item2</a></li><br />
                      <li><a href="#">Item3</a></li><br />
                      <li><a href="#">Item4</a></li>
            </ul>
    </div>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" class="content" style="display: none;">
        <ul style="padding: 20px; height: auto;">
            <li><a href="#">Other</a></li><br />
                      <li><a href="#">Other Test</a></li>
        </ul>
    </div>
</ul>

jQuery

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){    
    }
);

$('#nav_menu').hover(
    function(){
    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

FIDDLE

@Selfproblemmade Я только что работал с первой скрипкой, но завтра я могу сделать попытку на второй скрипке. Это если ваш вопрос все еще нуждается в ответе.
@Selfproblemmade Хорошо Проверьте мое обновление.
Это выглядит так же, как я представлял

jQuery Hover Раскрывающееся меню Размер полной ширины

5 ответов

Обновленный скрипт (новый)

Скрипт с задержкой добавлен как sony.de

Проверьте свой код jSFiddle

Загрузите файл кода из Box

Код HTML

Код CSS

JQuery

Ещё вопросы

Скрипт с задержкой добавлен как `sony.de`