Сайт о заработке и SEO

Скрипт Menu для uCoz

Armen_Chelsea — Sun, 25 Dec 2011 06:55:05 GMT

Code

Создание горизонтального меню

Armen_Chelsea — Sun, 25 Dec 2011 06:39:22 GMT

Урок посвящен созданию горизонтального меню на основе неупорядоченного списка и визуального оформления с помощью CSS-стилей. Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами. Список располагается внутри контейнера

.

К чему стремимся:
Code
- Home
- About us
- Portfolio
- Contact us
- FAQ
В данном примере меню располагается по центру страницы. Данный параметр будет зависеть от ширины внешнего блока, т.к. ширина меню составляет 100%.

С помощью CSS стилей придадим создаваемому меню желаемый вид.

Code
*{
  margin:0;
  padding:0;
}
.page{
  margin:0 auto;
  width:995px;
}
ul{
  list-style:none;
  width:100%;
  height:40px;
  background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
  float:left;
  border-right:1px solid #333;
}
ul li a{
  display:block;
  height:40px;
  padding:0 35px;
  float:left;
  text-transform: uppercase;
  font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
  color:#fff;
  text-decoration:none;
  text-align:center;
}
ul li a:hover,
ul li.active a{
  background:url(images/bg-button.gif) top left repeat-x;

Посмотреть пример горизонтального меню »

Скачать пример горизонтального меню »

Черное многоуровневое горизонтальное меню для сайта

Armen_Chelsea — Sun, 25 Dec 2011 06:23:43 GMT

Многоуровневое горизонтальное меню для сайта черного цвета. Отлично подойдет для информационных сайтов. Меню довольно хорошо прокомментировано, хотя новичкам не рекомендую его ставить. Конечно, если просто скопировать нужные коды и изменить ссылки меню, то и новички справятся.
Но как показала практика у некоторых товарищей возникают проблемы со всеми любимом IE. Я лично проблем не обнаружил, хотя и проверял только в IE 8.
Если кому интересно, за год этот сайт посетило всего 1,2% пользователей с IE ниже 8 версии. А ради 1% людей я не готов стараться, уж простите.
Меню последнее в этой "серии".

HTML Код:

Code

Главная

Игры

Азартные

Гонки

Стратегии

Аркады

Спорт

RPG(Ролевые)

Логические

Погода

Знакомства

Программы для ПК

CSS Код:

Code

ul#nav {
  list-style-type:none;
  margin:0;
  padding:0;
}

#nav {
  float:left;
  width:100%;
  height:75px; /* Высота всего меню (и верхнего уровня и нижнего, все вместе) */
  position:relative;
  margin:10px 0 40px; /* Отступ сверху и снизу от меню */
}

#nav .select, #nav .current {
  margin:0;
  padding:0;
  list-style:none;
  display:block;
}

#nav li {
  font-family: Arial; /* Шрифт меню */
  display:inline;
  margin:0;
  padding:0;
  height:auto;
}

#nav .select a, #nav .current a {
  display:block;
  height:40px; /* Высота верхнего уровня */
  float:left;
  background: url("/images/left_nav.png") no-repeat left top; /* Путь к левому изображению */
  padding:0 0 0 5px;
  text-decoration:none;
  font-size:14px; /* Размер шрифта верхнего уровня */
  line-height:40px;
  white-space:nowrap;
  margin-right: 2px; /* Отступы пунктов верхнего уровня */
  position: relative;
  z-index: 500;
}

#nav .select a b, #nav .current a b {
  height:100%;
  display:block;
  background:url("/images/right_nav.png") no-repeat right top; /* Путь к правому изображению */
  padding:0 20px 0 15px;
  color:#ddd; /* Цвет ссылок верхнего уровня */
}

#nav .select a:hover, #nav .select li:hover a {
  background-position:0 -50px;
  cursor:pointer;
}

#nav .select a:hover b, #nav .select li:hover a b {
  background-position:100% -50px;
  color:#fff;
}

#nav .sub {
  display:none;
}

#nav .current a {
  background-position:0 -50px;
  border-color:#046;
}
#nav .current a b {
  background-position:100% -50px;
  color:#fff; /* Цвет шрифта активного меню верхнего уровня */
}

#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover {
  color:#fff; /* Цвет шрифта активного меню нижнего уровня */
  text-decoration:underline;
}

#nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active {
  display:block;
  position:absolute;
  width:100%;
  height: 35px;
  top:40px;
  left:0;
  background:#171717; /* Фон нижнего уровня */
  padding:0;
  z-index:100;
}

#nav .sub_active {
  z-index:10;
}

#nav .sub, #nav .sub_active {
  margin:0;
  padding:0;
  list-style:none;
}

* html #nav .sub_active, * html #nav .select a:hover .sub {
  z-index:-1;
  margin-top:0;
  margin-top:1px;
}

#nav .sub_active a {
  height:25px;
  float:left;
  text-decoration:none;
  line-height:24px;
  white-space:nowrap;
  font-weight:normal;
}

#nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a {
  display:inline;
  background:none;
  padding:0 10px;
  margin:0;
  font-size:13px; /* Размер шрифта нижнего уровня */
  width:auto;
  white-space:nowrap;
  font-weight:normal;
  border:0;
  color:#eee; /* Цвет шрифта нижнего уровня */
  height:35px;
  line-height:35px;
}

Скачать «menu.rar»

Черное горизонтальное меню для сайта с синим свечением

Armen_Chelsea — Sun, 25 Dec 2011 06:21:42 GMT

Черное горизонтальное меню для сайта с синим свечением. Меню последнее в этой "серии". Все менюшки "Магнитофон" используют CSS и всего две картинки. Так же все они прекрасно отображаются не только в современных браузерах, но и в устаревших версиях.

HTML Код:

Code

   Главная
   О нас
   Контакты
   Карта сайта
   Как нас найти

CSS Код:

Code

/*===========================================
Свойства без комментариев менять не стоит.
Обязательно измените путь к изображению.
============================================*/

div.menu_ihtut_net {
  background: url("/images/menuihtutnet-fon.png") repeat-x 0 0; /* фон меню , пропишите правильный путь! */
  height:80px;
  overflow: hidden;
}

div.menu_ihtut_net div#menu_ihtut_net{
  float: left;
  padding:0;
  height:80px;
  margin: 0 10px;
}

div.menu_ihtut_net a{
  background: url("/images/menuihtutnet-link.png") no-repeat 0 0; /* фон пунктов меню , пропишите правильный путь! */
  color: #bbb; /* цвет шрифта */
  display: block;
  float: left;
  font: 17px/63px Impact; /* размер шрифта / высота шрифта (НЕ МЕНЯТЬ!) / семейство шрифтов */
  height:65px;
  text-decoration: none; /* подчеркивание(сейчас его нет) */
  text-align: center;
  width: 147px;
  overflow: hidden;
  margin: 10px 0 0 0; /* отступы пунктов меню */
  text-shadow: #000 0 0 1px; /* тень у букв */
}

div.menu_ihtut_net a:hover, div.menu_ihtut_net a.active{
  background: url("/images/menuihtutnet-link.png") no-repeat 0 100%; /* фон пунктов меню (при наведении) , пропишите правильный путь! */
  color: #bff5ff; /* цвет шрифта при наведении */
  text-shadow: #249dfb 0 0 25px; /* тень у букв при наведениии */
}

Скачать исходники [24.9 Kb]