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



 

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

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

Открыть тему
Добавить ответ в эту тему
> Нужен каркас вертикального навигационного меню
Ramster
Ramster
Topic Starter сообщение 24.7.2009, 21:24; Ответить: Ramster
Сообщение #1


Нужен каркас вертикального навигационного меню. Заплачу WMR. Пишите в асю: 8310541.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rost_hb
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
Licoric
сообщение 26.7.2009, 1:48; Ответить: Licoric
Сообщение #3


тут не указано, что нужно меню с выпадающими списками.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimjan4
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
Ramster
Topic Starter сообщение 26.7.2009, 23:59; Ответить: Ramster
Сообщение #5


Rost, спасибо большое. Да, Licoric прав, мне нужно красивое меню с выпдающеми подпунктами.

dimjan4, огромнейшее спасибо, для меня очень ценная находка, наверняка пригодиться в будущем. Но пока мне нужно вертикальное меню. И ещё, можно узнать технологию создания подпунктов. Просто вот ты сделал выпадающие подпункты, а у них больше нет выпадающих подпунктов. Но я точно знаю, что мне нужно будет как минимум 2 выпдающих списка. Буду очень благодарен если смастеришь каркас вертикального меню и предоставишь технологию создания списка подпунктов. Я просто в JavaScript на нуле.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimjan4
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 (с офф. сайта)
Если надо подгоню под диз...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Изготовление сайтов · Следующая тема »
 
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта
 0 Alex-777 835 7.4.2024, 18:05
автор: Alex-777
Открытая тема (нет новых ответов) Нужен исполнитель на постоянную основу для набора небольших текстов
 20 Думающий 9282 2.4.2024, 18:05
автор: Думающий
Открытая тема (нет новых ответов) Нужен сайт с автонаполнением по XML
 1 REGNET 1223 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


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 0:13

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet