Помощник
|
Нужен каркас вертикального навигационного меню |
Ramster
|
Сообщение
#1
|
||
|
|
||
|
|||
Rost_hb |
26.7.2009, 1:39;
Ответить: Rost_hb
Сообщение
#2
|
|
Вертикальное или горизонтальное - нет разницы. Любое меню - это список. Вот каркас.
<ul id="main_menu"> <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> <li><a href="#">Контакты</a></li> <li><a href="#">Карта сайта</a></li> </ul> Дальше смотришь на макет сайта и пишешь css списку и его элементам |
|
|
Licoric |
26.7.2009, 1:48;
Ответить: Licoric
Сообщение
#3
|
|
тут не указано, что нужно меню с выпадающими списками.
|
|
|
dimjan4 |
26.7.2009, 23:51;
Ответить: dimjan4
Сообщение
#4
|
|
Выподающее вертикальное меню
<html>
<head> <style> /* CSS Document */ ul#cssmenu { width:350px; margin: 0; border: 0 none; padding: 0; list-style: none; background: #003366; height: 30px; font: bold 12px/28px Verdana, Arial; border-left:#003366 1px solid; } ul#cssmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 30px; } ul#cssmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 30px; left: 0; } ul#cssmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#cssmenu ul li { width: 150px; float: left; display: block !important; display: inline; } /* Main Menu */ ul#cssmenu a { border: 0px; padding: 0 10px; float: none !important; float: left; display: block; background: #003366; color: #FFFFFF; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } /* Main Menu Hover */ ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a { background: #FFFFFF; color:#003366; border-top:#003366 1px solid; } /* Second Menu */ ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a { border-top: 2px solid #FFFFFF; float: none; background: #003366; color: #FFFFFF; } /* Second Menu Hover */ ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a { border-top: 2px solid #FFFFFF; background: #FFFFFF; color:#003366; border:#003366 1px solid; } ul#cssmenu ul ul { display: none; position: absolute; top: 0; left: 170px; } ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul { display: none; } ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul { display: block; } </style> </head> <body> <ul id="cssmenu"> <li><a href="#">Горизонтальное</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">CSS</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> </ul> </li> <li><a href="#">Меню</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> </ul> <script type="text/javascript"> function cssmenuhover() { if(!document.getElementById("cssmenu")) return; var lis = document.getElementById("cssmenu").getElementsByTagName("LI"); for (var i=0;i<lis.length;i++) { lis[i].onmouseover=function(){this.className+=" iehover";} lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");} } } if (window.attachEvent) window.attachEvent("onload", cssmenuhover); </script> </body> </html> |
|
|
Ramster
|
Сообщение
#5
|
|
Rost, спасибо большое. Да, Licoric прав, мне нужно красивое меню с выпдающеми подпунктами.
dimjan4, огромнейшее спасибо, для меня очень ценная находка, наверняка пригодиться в будущем. Но пока мне нужно вертикальное меню. И ещё, можно узнать технологию создания подпунктов. Просто вот ты сделал выпадающие подпункты, а у них больше нет выпадающих подпунктов. Но я точно знаю, что мне нужно будет как минимум 2 выпдающих списка. Буду очень благодарен если смастеришь каркас вертикального меню и предоставишь технологию создания списка подпунктов. Я просто в JavaScript на нуле. |
|
|
dimjan4 |
27.7.2009, 0:11;
Ответить: dimjan4
Сообщение
#6
|
|
Если чесно-я тоже в JavaScript не селён!
Вот Вам код: <!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=windows-1251" /> <title></title> <style type='text/css'> ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; } ul.dropdown { position: relative; z-index: 597; float: left; } ul.dropdown li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; } ul.dropdown li.hover, ul.dropdown li:hover { position: relative; z-index: 599; cursor: default; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.dropdown ul li { float: none; } ul.dropdown ul ul { top: 1px; left: 99%; } ul.dropdown li:hover > ul { visibility: visible; } </style> </head> <body> <ul class="dropdown"> <li><a href="./" class="dir">Посмотреть разделы сайта</a> <ul> <li><a class="dir" href="/html-css/">HTML и CSS</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li><a href="/js/">JavaScript</a></li> <li><a href="/photoshop/">Photoshop</a></li> <li><a href="/design/">Дизайн</a></li> <li><a href="/misc/">Разное</a></li> </ul> </li> </ul> <!--[if lt IE 7]> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("ul.dropdown li").hover(function() { $(this).addClass("hover"); $('> .dir',this).addClass("open"); $('ul:first',this).css('visibility', 'visible'); }, function() { $(this).removeClass("hover"); $('.open',this).removeClass("open"); $('ul:first',this).css('visibility', 'hidden'); }); }); </script><![endif]--> </body> </html> Не забудь скачать jquery-1.3.2.min.js (с офф. сайта) Если надо подгоню под диз... |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта | 0 | Alex-777 | 850 | 7.4.2024, 18:05 автор: Alex-777 |
|
Нужен исполнитель на постоянную основу для набора небольших текстов | 20 | Думающий | 9286 | 2.4.2024, 18:05 автор: Думающий |
|
Нужен сайт с автонаполнением по XML | 1 | REGNET | 1225 | 7.3.2024, 15:08 автор: REGNET |
|
Нужен райтер на постоянку | 13 | Kiloan_Frost | 3416 | 6.3.2024, 22:24 автор: vitaliraduga |
|
Нужен постинг в твиттер | 3 | uahomka | 1733 | 20.2.2024, 1:00 автор: robot_yaga2 |
Текстовая версия | Сейчас: 19.4.2024, 15:16 |