Навигация

Категории раздела
Формы [3]
Кнопки [3]
Галерея [5]
Слайдшоу [9]
Навигация [40]
Video - audio [4]
Изображения [9]
Разное [18]

Опрос
Оцените дизайн сайта (Evaluate design site)
Всего ответов: 19

Поделится


Chat

Поиск

Главная » Файлы » Скрипты » Навигация

Nice Pure CSS3 Slick Menu
Чтобы скачать фаил зарегистрируйтесь (for Download registration) 16.01.2011, 02:23

In this article we are trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.

Lets create the html used.

01 <div class="wrapper">
02 <div class="container"><ul class="menu" rel="sam1">
03 <li class="active"><a href="#">Home</a></li>
04 <li><a href="#">About</a></li>
05 <li ><a href="#">Blog</a></li>
06 <li><a href="#">Services</a></li>
07 <li><a href="#">Portfolio</a></li>
08 <li><a href="#">Contacts</a></li>
09 <li><a href="#">Twitter @insic</a></li>
10 </ul>
11 </div>
12 </div>



Now the CSS.

Lets add a gradients using CSS3 gradient property into our wrapper div.

01 .wrapper {
02 width: 100%;
03 height: 80px;
04 background : #464646;
05 background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
06 background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
07 border-top: 2px solid #939393;
08 position: relative;
09 margin-bottom: 30px;
10 }


The CSS code for the menu item.

01 ul {
02 margin: 0;
03 padding: 0;
04 }
05
06 ul.menu {
07 height: 80px;
08 border-left: 1px solid rgba(0,0,0,0.3);
09 border-right: 1px solid rgba(255,255,255,0.3);
10 float:left;
11 }
12
13 ul.menu li {
14 list-style: none;
15 float:left;
16 height: 79px;
17 text-align: center;
18 background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
19 background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
20 }
21
22 ul li a {
23 display: block;
24 padding: 0 20px;
25 border-left: 1px solid rgba(255,255,255,0.1);
26 border-right: 1px solid rgba(0,0,0,0.1);
27 text-align: center;
28 line-height: 79px;
29 background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
30 background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
31 -webkit-transition-property: background;
32 -webkit-transition-duration: 700ms;
33 -moz-transition-property: background;
34 -moz-transition-duration: 700ms;
35 }
36
37 ul li a:hover {
38 background: transparent none;
39 }
40
41 ul li.active a{
42 background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
43 background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
44 }



Автор: insic
Категория: Навигация | Добавил: Elixa | Теги: Вертикальное навигационное меню, скрипт меню
Просмотров: 333 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Личный кабинет
Привет: Гость

Сообщения:

Здавствуйте, зайдите под своим аккунтом

Переводчик сайта

Статистика Онлайн
Онлайн всего: 1
Гостей: 1
Пользователей: 0
К нам заходили: fabinhoishi99

Последние коменты
nice
Niether of the links work.
Всё востановлено
ссылка повреждена
THANKS..
Merci

Статистика

Друзья
 DiZona – все для Photoshop
------------------
Описание сайта
------------------
Описание сайта
------------------

Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz


  • Вход


    Вверх
    Copyright MyCorp © 2017 Хостинг от uCoz