Вертикальное меню для сайта на css | Как создать свой сайт

Создаем вертикальное меню для сайта на css

Фев-10-2010 Автор: VeryOldMan

Вообще-то вертикальное раскрывающееся меню,  можно создать разными способами. Покопавшись, я нашел у себя в загашнике, штук пять. И это только те, которые выполнены с помощью html и css. Я пока выбрал три. Первое уже было, так что перейдем ко второму. Чем это меню навигации отличается от предыдущего? Основное отличие в том, что у него нет дополнительной таблицы стилей css, которую мы делали для браузера Internet Explorer, поэтому код значительно проще. Да, еще я ввел в код, в title, вы сами увидите, где именно, поясняющую надпись — Страна в Европе. Естественно только для примера. Вы ее можете благополучно выбросить, или сделать любую свою. После всего этого меню навигации будет иметь такой вид:

вертикальное меню для сайта на css

Итак, непосредственно, создаем вертикальное меню для сайта на css:

Откроем редактор Dreamweaver. Создаем новую страницу. Между тегами <body> и </body>вставляем такой код:

<div class="menu">
<ul>
	<li><a>Европа<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
	<li><a title="Страна в Европе">Франция</a></li>
	<li><a title="Страна в Европе">Италия</a></li>
	<li><a title="Страна в Европе">Греция</a></li>
	<li><a title="Страна в Европе">Албания</a></li>
	<li><a title="Страна в Европе">Германия</a></li>
	<li><a title="Страна в Европе">Чехия</a></li>
</ul>
<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
	<li><a>Азия<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
	<li><a>Япония</a></li>
	<li><a>Китай</a></li>
	<li><a>Индия</a></li>
	<li><a>Непал</a></li>
	<li><a>Пакистан</a></li>
	<li><a>Израиль</a></li>
	<li><a>Иран</a></li>
</ul>
<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
	<li><a>Америка<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
	<li><a>США</a></li>
	<li><a>Мексика</a></li>
	<li><a>Канада</a></li>
	<li><a>Бразилия</a></li>
	<li><a>Перу</a></li>
</ul>
<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
	<li><a>Африка<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
	<li><a>Марокко</a></li>
	<li><a>ЮАР</a></li>
	<li><a>Конго</a></li>
	<li><a>Сомали</a></li>
	<li><a>Гвинея</a></li>
	<li><a>Алжир</a></li>
	<li><a>Того   </a></li>
</ul>
<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
</ul>
</div>

Если вы хотите сделать вертикальное меню для сайта в хедере готовой страницы, то и вставлять данный код нужно в контейнере хедера. Как в первом варианте. Это еще не все. Привяжем сразу к создаваемой странице таблицу стилей. Вставим в код страницы между тегами <head> и </head> вот такой код:

Создаем таблицу стилей под названием menu, открываем ее и вставляем в эту таблицу вот такой код:

.menu ul{
	list-style-type:none;
	padding:0;
	margin:0;
	}
 
.menu li{
float:left;
position:relative;
z-index:100;
}
 
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
 
.menu a, .menu :visited {
	display:block;
	font-size:12px;
	width:150px;
	color:#000;
	text-decoration:none;
	margin-right:2px;
	text-align:center;
	background-color: #66CCFF;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 7px;
	padding-right: 0;
	padding-bottom: 7px;
	padding-left: 0;
	border: 1px solid #0033CC;
	margin-top: 2px;
}
 
.menu :hover{
	color:#444;
	background-color: #99FFFF;
}
 
.menu ul ul {
	visibility:hidden;
	position:absolute;
	width:150px;
	height:0;
}
 
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

Вот в принципе и все! ! Вертикальное меню для сайта на css готово. Количество кнопок, число страниц, редактируется точно так же как и в первом варианте раскрывающегося меню для сайта. Размеры кнопок, цвет, шрифты и все такое прочее легко редактируются в таблице стилей.

Такой вот такой вариант раскрывающееся меню навигации для сайта. Может этот вам подойдет больше. Над ним можно и нужно поэкспериментировать. Например, сделать рамку вокруг кнопок и увеличить расстояние между кнопками:

вертикальное меню для сайта на css

Неплохо? Есть у меня в запасе еще одно вертикальное меню. Интересный  вариант, о котором  в следующей статье.






Комментариев (0)

Добавить комментарий