Principala » fisiere » Scripturi » Ucoz [ Adauga un material nou ]

Meniu frumos

2010-07-13, 11:36 PM

Красивое меню для Вашего сайта




В сегодняшнем уроке мы создадим красивую навигацию для Вашего сайта с помощью HTML, CSS и немного jQuery.

Подобное меню способно украсить любой сайт.

Приступим...

HTML

Единственное что нам понадобится для этого меню - это неупорядоченный список с ссылками и текстом внутри элементов списка:

Code
<ul id="navigation">
  <li class="home"><a href=""><span>Home</span></a></li>
  <li class="about"><a href=""><span>About</span></a></li>
  <li class="search"><a href=""><span>Search</span></a></li>
  <li class="photos"><a href=""><span>Photos</span></a></li>
  <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
  <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
  <li class="contact"><a href=""><span>Contact</span></a></li>
</ul>

CSS

Для начала мы определяем свойства для списка

Code
ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 0px;
  right: 10px;
  list-style: none;
  z-index:999999;
  width:721px;
}

Мы позиционируем список в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому мы фиксируем позиционирование. Все отступы и границы мы выставляем на 0. Навигация также должна быть поверх всех элементов на странице. Именно поэтому мы также выставляем высокой значение z-index. Также нам необходимо прописать ширину меню, чтобы элементы списка не наезжали друг на друга при изменении размера окна браузера.

Теперь давайте взглянем на свойства элементов списка:

Code
ul#navigation li {
  width: 103px;
  display:inline;
  float:left;
}

Если Вы хотите, чтобы список показывался горизонтально, необходимо установить значение display на inline. После этого элементы списка будут отображаться рядом друг с другом, а не под.

Теперь посмотрим на свойства ссылок в элементах списка:

Code
ul#navigation li a {
  display: block;
  float: left;
  margin-top: -2px;
  width: 100px;
  height: 25px;
  background-color: #E7F2F9;
  background-repeat: no-repeat;
  background-position: 50% 10px;
  border: 1px solid #BDDCEF;
  text-decoration: none;
  text-align: center;
  padding-top: 80px;
}

Тут стоить упомянуть только свойство padding, которое помогает переместить текст ссылки в самый низ блока.

Давайте теперь добавим круглых углов (не будут работать в Internet Explorer) и прозрачности:

Code
ul#navigation li a {
  display: block;
  float:left;
  margin-top: -2px;
  width: 100px;
  height: 25px;
  background-color:#E7F2F9;
  background-repeat:no-repeat;
  background-position:50% 10px;
  border:1px solid #BDDCEF;
  text-decoration:none;
  text-align:center;
  padding-top:80px;
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-bottom-left-radius: 10px;
  opacity: 0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Последнее значение filter сделает меню прозрачным и в IE.

Теперь давайте позаботимся о красивых иконках:

Code
ul#navigation .home a{
  background-image: url(../images/home.png);
}
ul#navigation .about a {
  background-image: url(../images/id_card.png);
}
ul#navigation .search a {
  background-image: url(../images/search.png);
}
ul#navigation .podcasts a {
  background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a {
  background-image: url(../images/rss.png);
}
ul#navigation .photos a {
  background-image: url(../images/camera.png);
}
ul#navigation .contact a {
  background-image: url(../images/mail.png);
}

При наведении мышки мы хотим, чтобы фоновый цвет менялся:

Code

ul#navigation li a:hover{
  background-color:#CAE3F2;
}

Еще добавим немного стиля нашим текстовым блокам:

Code

ul#navigation li a span{
  letter-spacing:2px;
  font-size:11px;
  color:#60ACD8;
  text-shadow: 0 -1px 1px #fff;
}

jQuery

Первым делом нам необходимо сделать, так чтобы элементы списка были спрятаны (похоже на клавиши рояля). Мы можем видеть только текст ссылки. При наведении на элемент, мы запускаем анимацию и показываем полностью блок с иконкой.

Code
$(function() {
  var d=300;
  $('#navigation a').each(function(){
  $(this).stop().animate({
  'marginTop':'-80px'
  },d+=150);
  });

  $('#navigation > li').hover(
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-2px'
  },200);
  },
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-80px'
  },200);
  }
);
});

Скрипт устанавливает marginTop на -80 пикселей. Эффект для первого элемента должен продолжаться 300+150 миллисекунд и каждый следующий элемент должен исчезать с задержкой 150 миллисекунд.

После того, как мышку пользователь убирает - все возвращается на свои места.

Урок закончен! До следующих встреч!

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.tympanus.net

Демо

Скачать «Красивое меню для Вашего сайта»




Categorie: Ucoz | Adaugat de: kopceak
Vizualizari: 816 | Downloads: | Raging: 0.0/0
Total comentarii : 0
Doar utilizatorii inregistrati pot comenta
[ Inregistrare | Login ]
Schimbul de fişiere este realizat de către utilizatorii site-ului, administraţia nu poartă nici o răspundere pentru conţinutul acestora sau pentru prejudiciile provocate. INTERFILM.MD nu dispune de conţinutul pus la schimb de către utilizatori, ci doar este un catalog al resurselor. Vă atenţionăm să nu încărcaţi pe site fişiere protejate de drepturile autorului sau fişiere cu conţinut ilegal. În cazul în care sunteţi deţinătorul drepturilor de autor al unui torrent şi doriţi să fie şters vă rugăm să ne scrieţi la adresa abuse@interfilm.md şi imediat se vor lua măsuri. Întregul text privind regulile şi condiţiile de utilizare a siteului poate fi găsit aici.