Горизонтальное выдвижное меню CSS

HTML

<ul id="navlist"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> <li><a href="#">Six</a></li></ul>

 

CSS

ul#navlist {display: inline;list-style: none;}

 

 

CSS

ul#navlist li {float: left;width: 60px;height:60px;}

 

 

CSS

ul#navlist li a {width: 50px;height:50px;padding:5px;display:block;

 

 

CSS

color:#fff;text-decoration: none;font-size:7pt;font-family:arial;line-height:50px;text-align:center

;

 

CSS

border-right:1px solid #fff;border-left:1px solid #fff;border-top: 5px solid #fff;border-bottom: 5px solid #fff;background: #003663;}

 

 

CSS

ul#navlist li a:hover { border-top: 5px solid #004a80; border-bottom: 5px solid #004a80; background:#004a80; font-size:9pt; font-weight:bold;}

 

Создание центрированной горизонтальной навигации

HTML

<ul id="nav"> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/work/">Work</a></li> <li><a href="/clients/">Clients</a></li> <li><a href="/contact/">Contact</a></li> </ul>

 

CSS

#nav{ border:1px solid #ccc; border-width:1px 0; list-style:none; margin:0; padding:0; text-align:center;}#nav li{ display:inline;}#nav a{ display:inline-block; padding:10px;}

 

 

Белое меню

#2e2e2e и #1c1c1c.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Темное вертикальное меню

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Горизонтальное меню на css3

HTML

<ul id="main-navigation"> <li class="first"><a href="">Home</a></li> <li><a href="">Themes</a></li> <li><a href="">Demos</a></li> <li><a href="">Blog</a></li> </ul>

 

 

CSS

#main-navigation { width: 100%; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666'); border: 1px solid #444; list-style: none; padding: 0; margin: 0; float: left; } #main-navigation li { float: left; border-right: 1px solid #777; } #main-navigation li a { font: 13px Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; padding: 12px 20px; border-right: 1px solid #333; display: block; color: #fff; }

 

 

 

 

 

CSS

#main-navigation li.first a { -moz-border-radius: 8px 0 0 8px; -khtml-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px;}

 

Белое меню для сайта

 

 

 

Ход работы

1. Рассмотреть методы организации анимированного меню.

2. Создать 3 вида меню.

3. Уяснить различия между различными типами меню.

4. Использовать рассмотренные методы оформления html-документа.

 

Задание для самостоятельного выполнения

1. Применить рассмотренные виды меню.

2. Самостоятельно создать меню, которое не было рассмотрено в данной работе.

 

Содержание отчета

1. Выполнить все пункты задания.

2. Представить коды выполненных операций.

3. Представить результат выполненной работы.

4. Исходные файлы сбросить на сервер \\academy.