Здравствуйте, Гость!
Мы просим вас войти или зарегистрироваться у нас на сайте.

Форма входа
Интересно


---

Наши флудеры
Ник: [FRAZZY73]
Сообщений: 37
Вебмастер
[FRAZZY73]
Ник: VIP
Сообщений: 7
Модераторы
VIP
Ник: startsmart
Сообщений: 4
Пользователи
startsmart
Партнёры
Статистика
  
Онлайн всего: 1
Чайников: 1
Вебмастеров: 0


Сегодня были:

Скрипты Светлое вертикальное меню [2.6 Kb] (Скачиваний: 0)

Шаг 1. HTML-конструкция меню.

Да, если Вы уже заметили наше меню будет напоминать меню с сайта Apple.com. Как и всегда, сначала мы должны составить HTML-конструкцию нашего будущего меню. Она будет конечно же очень простой. Вы и сами могли ее, в принципе, сделать, однако я уже позаботился об этом и разместил специально для для Вас нижеприведенный код:


Code
ul id="menu">  
<li><a href="http://ruseller.com/index.php" title="Главная"><img src="images/home.png" alt="Home" class="home" /></a></li>  
<li><a href="http://evgeniypopov.ru" title="Форум поддержки">Форум поддержки</a></li>  
<li><a href="http://evgeniypopov.com" title="Блог">Блог</a></li>  
<li><a href="http://ruseller.com/goodies.php" title="Товары">Товары</a></li>  
<li><a href="http://ruseller.com/about.php" title="О нас">О нас</a></li>  
</ul>

Шаг 2. Дизайн меню

Теперь приступим к заключительной фазе разработки нашего меню. Т. к. наше меню сделано только лишь с помощью CSS, то нам остается всего вставить между тегами <head> и </head> следующий css-код:


Code


<style type="text/css">

body {font: 11px Arial, Helvetica, sans-serif;  
  }
#menu {font: 11px Arial, Helvetica, sans-serif;
  background-image:url('images/bc_bg.png');  
  background-repeat:repeat-x;
  height:30px;
  line-height:30px;
  color:#9b9b9b;
  border:solid 1px #cacaca;
  width:100%;
  overflow:hidden;
  margin:0px;
  padding:0px;
  }
  #menu li {list-style-type:none;
  float:left;
  padding-left:10px;
  }
  #menu a {height:30px;
  display:block;
  background-image:url('images/bc_separator.png');  
  background-repeat:no-repeat;  
  background-position:right;
  padding-right: 15px;
  text-decoration: none;
  color:#454545;
  }
  .home {border:none;
  margin: 8px 0px;
  }
#menu a:hover{color: gray;
  }
</style>


Также вы сможете скачать исходники картинок
Автор: FRAZZY73
Источник: http://frazzy73.do.am
1 комментарий
778 просмотров
автор: [FRAZZY73]
дата: 18.06.2012, 09:50

[FRAZZY73]
18.06.2012 09:52
Менюшка капризная так , что если что то не получится я помогу)
Вы не можете добавлять комментарии

При копировании материалов → указывайте ссылку на источник!
          Анализ сайта 

Счётчики
Сегодня нас посетило
     

Показано 2 последних комментария из 20.
Cтарался! дальше »
Мини-статистика
Всего зарегистрировано: 40
Файлов всего: 32
Тем на форуме: 39