Как сделать выпадающие меню

@OoHikeoO · Регистрация: 03.04.2013

Студворк — интернет-сервис помощи студентам

Ребят вот есть такая вот код нужно что бы выпадало меню через тег <ul></ul>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html lang="rus">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>untitled</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
 
<div id="container">
 
    <ul id="nav">
        <li id="selected"><a href="#">главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Акции</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Вакансии</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
 
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>    
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 
<script type="text/javascript" src="java.js"></script>  
 
<script type="text/javascript">
$('#nav').spasticNav();
</script>
 
     
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
(function($) {
 
    $.fn.spasticNav = function(options) {
    
        options = $.extend({
            overlap : 20,
            speed : 500,
            reset : 1500,
            color : '#0b2b61',
            easing : 'easeOutExpo'
        }, options);
    
        return this.each(function() {
        
            var nav = $(this),
                currentPageItem = $('#selected', nav),
                blob,
                reset;
                
            $('<li id="blob"></li>').css({
                width : currentPageItem.outerWidth(),
                height : currentPageItem.outerHeight() + options.overlap,
                left : currentPageItem.position().left,
                top : currentPageItem.position().top - options.overlap / 2,
                backgroundColor : options.color
            }).appendTo(this);
            
            blob = $('#blob', nav);
                        
            $('li:not(#blob)', nav).hover(function() {
                // mouse over
                clearTimeout(reset);
                blob.animate(
                    {
                        left : $(this).position().left,
                        width : $(this).width()
                    },
                    {
                        duration : options.speed,
                        easing : options.easing,
                        queue : false
                    }
                );
            }, function() {
                // mouse out    
                reset = setTimeout(function() {
                    blob.animate({
                        width : currentPageItem.outerWidth(),
                        left : currentPageItem.position().left
                    }, options.speed)
                }, options.reset);
                
            });
         
        
        }); // end each
    
    };
 
})(jQuery);

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
#container {
 width: 900px;
 margin: 100px auto;
}
 
ul, li {
 margin: 0; padding: 0;
}
 
#blob {
 
 border-right: 1px solid #0059ec;
 border-left: 1px solid #0059ec;
 position: absolute;
 top: 0;
 z-index : 1;
 background: #0b2b61;
 background: -moz-linear-gradient(top, #0b2b61, #1153c0);
 background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1153c0));
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-box-shadow: 2px 3px 10px #011331;
 -webkit-box-shadow: 2px 3px 10px #011331;
 
}
 
#nav {
 position: relative;
 background: white;
 float: left;
}
 
#nav li {
 float: left;
 list-style: none;
 border-right: 1px solid #4a4a4a;
 border-left: 1px solid black;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
}
 
#nav li a {
 color: black;
 position: relative;
 z-index: 2;
 float: left;
 font-size: 15px;
 font-family: helvetica, arial, sans-serif;
 text-decoration: none;
 padding: 22px 45px;
}

Добавлено через 23 часа 57 минут
че некто не знает или вникнуть не хочет?

@WEBfack · 10.11.2013, 13:52

не делай на js используй только html and css погугли простые меню, посмотри как сделаны, и сможешь их штамповать кучами потом.

@OoHikeoO · 11.11.2013, 12:18 **[ТС]**

так на css вроде нету ползунка бегущего )) оно работает только надо что бы при наведение на один раздел падало в низ ))

Добавлено через 4 часа 3 минуты
Народ так что некто не подскажет?

Добавлено через 59 минут
народ плз хелп очень хочу такую штуку сделать + розобратся хоть дайте подсказку или обясните как это делать ) я учюсь писать сайты поэтому хочу увидеть как правильно делать

Добавлено через 15 часов 45 минут
ясно тему можно закрыть

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@WEBfack 0 / 0 / 0 Регистрация: 10.11.2013 Сообщений: 15
	10.11.2013, 13:52
	не делай на js используй только html and css погугли простые меню, посмотри как сделаны, и сможешь их штамповать кучами потом. 0

@OoHikeoO 0 / 0 / 0 Регистрация: 03.04.2013 Сообщений: 25
	11.11.2013, 12:18 [ТС]
	так на css вроде нету ползунка бегущего )) оно работает только надо что бы при наведение на один раздел падало в низ )) Добавлено через 4 часа 3 минуты Народ так что некто не подскажет? Добавлено через 59 минут народ плз хелп очень хочу такую штуку сделать + розобратся хоть дайте подсказку или обясните как это делать ) я учюсь писать сайты поэтому хочу увидеть как правильно делать Добавлено через 15 часов 45 минут ясно тему можно закрыть 0