X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Выпадающее меню через ява-скрипт.
prolisk
prolisk
Topic Starter сообщение 11.2.2013, 20:47; Ответить: prolisk
Сообщение #1


Пишем наше меню обычным списком. Если нужно многоуровневое, вложенное меню, то нужно правильно прописать <li> и <ul>.
[spoiler="на странице пишем меню"]
<ul>
<li onmouseover='starta()' onmouseout='stopa()'>Антивирусы
<ul id='antiv'>
<li>DrWeb</li>
<li>Kaspersky</li>
<li>panda</li>
</ul></li>
<li onmouseover='startd()' onmouseout='stopd()'>Поисковики
<ul id='seo'>
<li>Гугл</li>
<li>Яндекс</li>
<li>Яхубезху</li>
</ul></li>
<li onmouseover='startt()' onmouseout='stopt()'>Телефоны
<ul id='tel'>
<li>Nokia</li>
<li>Samsung</li>
<li>Iphone</li>
<li onmouseover='startc()' onmouseout='stopc()'>Сенсорные
<ul id='sensor'>
<li>Galaxy</li>
<li>не галахи</li>
</ul></li>
</ul></li>
</ul>
[/spoiler]
Ну и главное написать функции в яваскрипте для того, чтобы список действительно был выпадающим
[spoiler="наши функции"]
<script type='text/javascript'>
function starta(){
document.getElementById('antiv').style.display='block';
}
function stopa(){
document.getElementById('antiv').style.display='none';
}
function startd(){
document.getElementById('seo').style.display='block';
}
function stopd(){
document.getElementById('seo').style.display='none';
}
function startt(){
document.getElementById('tel').style.display='block';
}
function stopt(){
document.getElementById('tel').style.display='none';
}
function startc(){
document.getElementById('sensor').style.display='block';
}
function stopc(){
document.getElementById('sensor').style.display='none';
}
</script>
[/spoiler]


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Witch_You
Witch_You
сообщение 12.2.2013, 15:09; Ответить: Witch_You
Сообщение #2


А div-вёрстка в этом плане не легче?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 12.2.2013, 16:26; Ответить: andreykashops_hb
Сообщение #3


Witch_You, выпадающее меню можно сделать на CSS, но при чем здесь div-вёрстка? :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
Topic Starter сообщение 12.2.2013, 18:35; Ответить: prolisk
Сообщение #4


у большинства css ассоциируется с див-ной версткой.
можно и стилями, даже думаю проще будет. ведь в самих функциях мы задаем стили.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Innulia
Innulia
сообщение 14.2.2013, 13:35; Ответить: Innulia
Сообщение #5


Неплохо, хотя я все же обычно пишу выпадающее меню на CSS. Как-то оно для меня проще, а за красивостями я не гонюсь


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga_rs
Gerga_rs
сообщение 15.2.2013, 3:38; Ответить: Gerga_rs
Сообщение #6


(Witch_You)
А div-вёрстка в этом плане не легче?

Что на яве, что в css, не тяжело. С помощью css, выпадающее меню примерно так может выглядеть:
[spoiler="HTML файл"]<body>
<ul class="hidden">
<li><a href="1.html" class="visible">Наведи</a></li>
<li><a href="2.html">Тра ляля</a></li>
<li><a href="3.html">Тра ляля</a></li>
</ul>

<ul class="hidden">
<li><a href="1.html" class="visible">Наведи</a></li>
<li><a href="2.html">Тра ляля</a></li>
<li><a href="3.html">Тра ляля 2</a></li>
<li><a href="4.html">Тра ляля 3</a></li>
</ul>
</body>[/spoiler]
[spoiler="CSS файл"]ul li {
list-style: none;
}

.hidden {
width:100px;
border:1px solid black;
float: left;
margin-left: 5px;
}

.hidden a{
display: none;
}

.hidden:hover a{
display:block;
}

ul li .visible {
display:block;
}[/spoiler]
Какой способ использовать, дело хозяйское.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 15.2.2013, 10:37; Ответить: andreykashops_hb
Сообщение #7


Innulia, я тоже предпочитаю CSS, что бы сайт сильно не грузить.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
viktor1212
viktor1212
сообщение 20.4.2013, 8:59; Ответить: viktor1212
Сообщение #8


Очень нужный скрипт.спасибо


prolisk: пользуемся кнопочкой, другим пользователям не совсем интересно читать "спасибо-пожалуйста-на здоровье".
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nevermind
Nevermind
сообщение 31.10.2013, 12:37; Ответить: Nevermind
Сообщение #9


Простейшее меню:
$('ul li').mouseenter(function() {
$(this).children('ul').stop(false, true).fadeIn('500')
}).mouseleave(function(){
$(this).children('ul').stop(false, true).fadeOut('500');
});


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Основной проект: http://jsale.biz
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыBropush - Твой бро в монетизации через Push-уведомления
28 bropush 11221 27.3.2024, 12:52
автор: bropush
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1947 23.3.2024, 7:41
автор: Room
Открытая тема (нет новых ответов) XMLSeo - поисковая выдача Яндекс, Wordstat, Google, Bing, DuckDuckGo через API
0 Malpertu36 1538 25.12.2023, 19:34
автор: Malpertu36
Открытая тема (нет новых ответов) Продвижение сайта через краудинг с поддержкой
Полный комплекс мер по продвижению сайта
0 alexey 987 22.8.2023, 16:33
автор: alexey
Открытая тема (нет новых ответов) Скрипт поисковика видео StrongTube
3 3josoft 1561 14.8.2023, 14:45
автор: 3josoft


 



RSS Текстовая версия Сейчас: 29.3.2024, 18:09
Дизайн