Сложное двойное выпадающее меню

Сложное двойное выпадающее меню

Опции

Elusive28

Topic Starter сообщение

8.12.2012, 19:23; Ответить: Elusive28

Сообщение #1

0

Группа: User
Сообщений: 32
Регистрация: 8.12.2012
Поблагодарили: 0 раз
Репутация:

0

Помогите пожалуйста создать такое меню:
[IMG]http://www.pictureshack.ru/thumbs/59248_Hardmenu.png[/IMG]
Цвета пока не играют роли, тексты тоже, просьба помочь доработать код.
Вот, что уже я сделал:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.menu_nav {
list-style-type: none;
margin: 0;
padding: 0 0 10px 50px;
}

ul {
margin-bottom: 2px;
margin-top: 2px;
}
.menu_nav li {
color: #DFBF89;
cursor: pointer;
line-height: 20px;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
.menu_nav a {
color: #DFBF89;
font-family: Tahoma;
font-size: 14px;
text-decoration: none;
}
.menu_nav li.nav2 {
color: #923730;
cursor: pointer;
line-height: 20px;
list-style: disc outside none;
margin: 0;
padding: 0;
text-align: left;
}
.menu_nav li.nav2 a {
color: #DFBF89;
}

.suckerdiv ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li {
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul {
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited {
color: black;
}

.suckerdiv ul li a:hover {
background-color: yellow;
}

.suckerdiv .subfolderstyle {
background: url(arrow-list.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li {
float: left;
height: 1%;
}

* html .suckerdiv ul li a {
height: 1%;
}

</style>
<script type="text/javascript">
function showthis_id(id) {
//if(document.getElementById('menu'+id).style.display=='none'){
// document.getElementById('menu'+id).style.display='block';
//}else{
// document.getElementById('menu'+id).style.display='none';
//}
//document.getElementById('menu'+1).style.display='none';
var ii;
for(ii=1;ii<=25;ii++){
if(id==ii){
if (document.getElementById('menu' + ii)) {
document.getElementById('menu' + ii).style.display = 'block';
}
}else{
if (document.getElementById('menu' + ii)) {
document.getElementById('menu' + ii).style.display = 'none';
}
}
}
}

</script>
<script type="text/javascript">
var menuids=["suckertree1"]

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>

</head>

<body>
<ul class="menu_nav">



<li><a onclick="showthis_id(1)" href="#">Общие вопросы</a><div style="display: none;" id="menu1"><ul style="padding-left: 30px;" class="menu_nav">
<div class="suckerdiv">
<li id="suckertree1"><a href="#">QUESTION 1</a>
<ul>
<li id="suckertree1"><a href="#">blablablabla</a></li>
<li id="suckertree1"><a href="#">blabla</a></li>
</ul></li></div>
<li class="nav2"><a href="#">Модерн</a></li></ul></div></li>



<li><a onclick="showthis_id(2)" href="#">Вопросы связанные с оплатой</a><div style="display: none;" id="menu2"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика</a></li>
<li class="nav2"><a href="#">Модерн</a></li><li class="nav2"><a href="#">Шкафы</a></li><li class="nav2"><a href="#">Туалетные столы</a></li></ul></div></li>



<li><a onclick="showthis_id(3)" href="#">Настройка скриптов</a><div style="display: none;" id="menu3"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика</a></li><li class="nav2"><a href="#">Модерн</a></li></ul></div></li>



<li><a onclick="showthis_id(4)" href="#">Вопросы связанные с почтой</a><div style="display: none;" id="menu4"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика</a></li>
<li class="nav2"><a href="#">Модерн</a></li>
<li class="nav2"><a href="#">Бары</a></li>
<li class="nav2"><a href="#">Витрины</a></li>
<li class="nav2"><a href="#">Буфеты</a></li>
<li class="nav2"><a href="#">Книжные шкафы </a></li>
<li class="nav2"><a href="#">Комоды и стеллажи</a></li>
<li class="nav2"><a href="#">Консоли</a></li>
<li class="nav2"><a href="#">Столы и стулья</a></li></ul></div></li>



<li><a onclick="showthis_id(5)" href="#">Вопросы по панели управления</a><div style="display: none;" id="menu5"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика</a></li>
<li class="nav2"><a href="#">Модерн</a></li></ul></div></li>



<li><a onclick="showthis_id(6)" href="#">МЯГКАЯ МЕБЕЛЬ</a><div style="display: none;" id="menu6"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика</a></li><li class="nav2"><a href="#">Модерн</a></li><li class="nav2"><a href="#">Кресла</a></li></ul></div></li>



<li><a onclick="showthis_id(7)" href="#">КАБИНЕТЫ И БИБЛИОТЕКИ</a><div style="display: none;" id="menu7"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика </a></li>
<li class="nav2"><a href="#">Модерн</a></li>
<li class="nav2"><a href="#">Письменные столы</a></li><li class="nav2"><a href="#">Книжные шкафы</a></li>
<li class="nav2"><a href="#">Кресла и стулья</a></li></ul></div></li>



<li><a onclick="showthis_id(8)" href="#">СТОЛОВЫЕ</a><div style="display: none;" id="menu8"><ul style="padding-left: 30px;" class="menu_nav"><li class="nav2"><a href="#">Классика</a></li></ul></div></li>



<li><a onclick="showthis_id(9)" href="#">ДЕТСКИЕ КОМНАТЫ</a><div style="display: none;" id="menu9"><ul style="padding-left: 30px;" class="menu_nav">
<li class="nav2"><a href="#">Классика</a></li>
<li class="nav2"><a href="#">Модерн</a></li></ul></div></li></ul>
</body>
</html>

0

Ответить с цитированием данного сообщения

Elusive28 Topic Starter Elusive28Topic Starter 8.12.2012, 19:27; Сообщений: 32 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 8.12.2012, 19:27; Ответить: Elusive28 Сообщение #2
0 Группа: User Сообщений: 32 Регистрация: 8.12.2012 Поблагодарили: 0 раз Репутация: 0	Помогите пожалуйста, очень нужно(

Arks Arks 8.12.2012, 20:37; Сообщений: 2780 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	8.12.2012, 20:37; Ответить: Arks Сообщение #3
0 Группа: User Сообщений: 2780 Регистрация: 20.3.2010 Поблагодарили: 0 раз Репутация: 0	а что должно в итоге получиться поподробнее можно? А то я вижу кусок кода - затем фразу "Помогите пожалуйста"

Elusive28 Topic Starter Elusive28Topic Starter 8.12.2012, 20:44; Сообщений: 32 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 8.12.2012, 20:44; Ответить: Elusive28 Сообщение #4
0 Группа: User Сообщений: 32 Регистрация: 8.12.2012 Поблагодарили: 0 раз Репутация: 0	на картинке ведь видно, что должно получиться: с пунктов меню 1-9 должно выезжать подменю вниз, а с вот этого выехавшего подменю должно еще вправо либо по клику либо при наведении курсора выезжать вправо еще одно подменю

Arks Arks 8.12.2012, 21:03; Сообщений: 2780 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	8.12.2012, 21:03; Ответить: Arks Сообщение #5
0 Группа: User Сообщений: 2780 Регистрация: 20.3.2010 Поблагодарили: 0 раз Репутация: 0	а ну теперь уже понятно, просто еще код был, вот непонятно к чему он и картинка, но теперь понятно! Щас займусь. Только можно я не буду в Вашем ковыряться, а свое напишу - мне это быстрее. jQuery не используете? с ним проще. Но если нет - обойдемся без него. Либо по клику либо по наведению = по наведению. По клику, а через 1-2 сек. фокуса по наведению это тоже можно, но если честно нелогично. Т.к. пользователь либо сразу кликнет либо не будет держать 2 сек мышку над пунктом.

Elusive28 Topic Starter Elusive28Topic Starter 8.12.2012, 21:20; Сообщений: 32 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 8.12.2012, 21:20; Ответить: Elusive28 Сообщение #6
0 Группа: User Сообщений: 32 Регистрация: 8.12.2012 Поблагодарили: 0 раз Репутация: 0	Напишите пожалуйста. Все равно на чем, лишь бы реально работало. Буду очень благодарен!! Я разберусь в любом коде - пишите на чем удобнее:goodpost:

Arks Arks 8.12.2012, 21:42; Сообщений: 2780 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	8.12.2012, 21:42; Ответить: Arks Сообщение #7
0 Группа: User Сообщений: 2780 Регистрация: 20.3.2010 Поблагодарили: 0 раз Репутация: 0	Не мне лень что-то стало.... извините. Мои идеи получаются слишком глобальными и коммерческими, сейчас времени не найду. А их дегрейдами в конексте Вашего вопроса просто нет желания заниматься. Даж не знаю что посоветовать - учите Javascript, C, C#, php, java, R(отсортировано в порядке "лично для Вас")! Обычно люди останавливаются на C#, а между прочим зря. Я думаю поступим так - Вы пишите что получается, и стукнитесь в скайп, а я по мере свободного времени без проблем подскажу.

cyber_ua cyber_ua 8.12.2012, 22:06; Сообщений: 1255 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	8.12.2012, 22:06; Ответить: cyber_ua Сообщение #8
0 Группа: User Сообщений: 1255 Регистрация: 3.10.2011 Поблагодарили: 0 раз Репутация: 0	(Elusive28 @ 9.12.2012, 00:20) Напишите пожалуйста. Все равно на чем, лишь бы реально работало. Буду очень благодарен!! Я разберусь в любом коде - пишите на чем удобнее а как насчет в гугле на русском http://lmgtfy.com/?q=%D0%B4%D0%B2%D1%83%D1...BD%D1%8E+jquery

Arks Arks 8.12.2012, 22:13; Сообщений: 2780 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	8.12.2012, 22:13; Ответить: Arks Сообщение #9
0 Группа: User Сообщений: 2780 Регистрация: 20.3.2010 Поблагодарили: 0 раз Репутация: 0	cyber_ua, ну тут у человека другая проблема. Если бы нам писал очередной менеджер веб-студии, то не прикладывал бы такой код и вообще не смотрел за темой. Меню кстати, трехуровневое. Вот не лень так ему пример приведи. Мне самому сразу так интересно стало что я уже начал писать ТЗ себе на разработку на js супер-мега-меню которое может ВСЁ(оно БОХ ВООБЩЕ :rolleyes:)... но потом слава Богу спустился на землю и понял что мало кому кроме меня это будет интересно. Т.е. трудозатраты(с учетом что я трачу на форум и его изыски свое сободное время) - несоизмеримы с профитом.

cyber_ua cyber_ua 8.12.2012, 22:36; Сообщений: 1255 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	8.12.2012, 22:36; Ответить: cyber_ua Сообщение #10
0 Группа: User Сообщений: 1255 Регистрация: 3.10.2011 Поблагодарили: 0 раз Репутация: 0	Arks, :rolleyes: http://blog.webmasterschool.ru/javascript/197/ (больше времени потратил на поиск смайла чем на поиск меню). В общем такое меню не сложно сделать, но блин я щас сам разрываюсь на 2 проекта , так что пример нет времени писать.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Перенести меню	1	Викторио_mw	1468	28.8.2018, 0:10 автор: TimurR
Необходимо разрезать и установить Меню для группы ВКонтакте	2	boltuk	3416	4.12.2017, 14:44 автор: tezoro
Помогите с меню - переделать в выпадающее	1	lepota	1130	4.12.2017, 13:29 автор: yury_mw
Слайдер под меню	0	Olya_Poy	4647	29.11.2017, 11:09 автор: -garmoni-
На разных разрешениях меню выглядит по разному	0	SPiar	4817	28.9.2017, 17:45 автор: -korotkov-