Работа на дому

Заработок в Интернете без вложений.
Москва
pogoda.ru.net
 
 
 
 
 
 

Полезная информация
Необходимо выставить права 777 на папку 78435758








PR-CY.ru
Оплачиваемая реклама.


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

   Простое динамические меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков, а, используя современные методы CSS и JavaScript, можно придать своему меню красивый и респектабельный вид, что повлияет на посещаемость сайта, а следовательно и отобразится на вашем заработке в интернете. В этом разделе мы с вами разберём, как сделать простое горизонтальное и вертикальное меню.
Все меню имеют примерно одинаковую html-разметку, будь то горизонтальное или вертикальное меню. Поэтому я буду использовать для обоих типов меню одну и туже разметку. Она выглядит примерно так:


<ul id="set">
<li><a href="
ссылка на страницу сайта">меню</a></li> <li><a href="ссылка на страницу сайта">меню</a></li> <li><a href="ссылка на страницу сайта">меню</a></li> </ul>


Посмотрим, что у нас получилось.

Сделаем горизонтальное меню. Для того чтобы ссылки в меню обрели красивую форму, добавим код стиля CSS:

#set, #set ul {
  list-style: none; 
  margin: 0; 
  padding: 0; 
  border: 1px solid #669999; 
  background: #CCFFFF; 
  float: left; 
  width: 45%;
}
#set li {
  float: left; 
  position: relative; 
  background: #CCFFFF; 
  background: #CCFFFF; 
  border: 1px solid #FFF; 
  border-right-color: #527337; 
  border-bottom-color: #527337; 
}

#set a {
  color:#660033; 
  text-indent:5px; 
  display: block; 
  width: 125px; 
  padding: 2px 10px; 
  background: #00FFFF; 
  
}
#set a:hover {
  color: #FFFFCC; 
  background: #009999;

Между тегами (<head>…</head>) вставим наш css-файл со стилями.

<link rel="stylesheet" href="examples.css" type="text/css">

посмотреть
Посмотреть полный код в сборе можно здесь.

   Также, для украшения меню, в качестве фона можно использовать картинку.
В начале с помощью программы Photoshop создадим две картинки. Они будут выглядеть примерно так:


Вы можете, приложив фантазию, сделать свои картинки.
Далее, в файле стилей поменяем background для элементов set a и set a:hover. Вот, что у нас получится:

#set, #set ul {
  list-style: none; 
  margin: 0; 
  padding: 0; 
  border: 1px solid #669999; 
  background: #CCFFFF; 
  float: left; 
  width: 45%;
}
#set li {
  float: left; 
  position: relative; 
  background: #CCFFFF; 
  background: #CCFFFF; 
  border: 1px solid #FFF; 
  border-right-color: #527337; 
  border-bottom-color: #527337; 
}

#set a {
  color:#FFFFCC; 
  text-indent:5px; 
  display: block; 
  width: 125px; 
  padding: 2px 10px; 
  background: url(http://s12.radikal.ru/i185/1008/e6/9d75b9172d32.jpg); 
  
}
#set a:hover {
  color: #660033; 
  background: url(http://s43.radikal.ru/i102/1008/78/f51d88f1aa3a.jpg);

посмотреть
Данный вид меню отображается во всех браузерах (Mozilla, Opera, IE).
На следующей странице мы с вами разберём, как сделать вертикальное меню.

2017-12-14 18:03:36 - Не могу записать данные в файл: /var/www/cleopa/data/www/rabotjagamneta.com/petersontrivia/cache_rabotjagamneta_com_06.txt
2017-12-14 18:03:36 - Не могу записать данные в файл: /var/www/cleopa/data/www/rabotjagamneta.com/petersontrivia/cache_rabotjagamneta_com_06.txt



Курс валют
http://www.kottages.ru/
Оплачиваемая реклама.

Новинки кинопроката
Новинки кинопроката
Новинки кинопроката
Новинки кинопроката
Новинки кинопроката
Новинки кинопроката

Оплачиваемая реклама.
Сайт создан в 2010 г ©.Работа в интернете на дому.
Копирование информации разрешено лишь
с разрешения владельца сайта.