Горизонтальное меню на HTML и CSS

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Горизонтальное меню на HTML и CSS

Сообщение Slash » Сб окт 27, 2012 3:25 pm

Простейшее меню на HTML и CSS. В HTML шаблон своего сайта вставляем:

Код: Выделить всё

<div id="danfa_menu">
   <ul>
      <li><a href="#1">Мой Компьютер</a></li>
      <li><a href="#2">Web Мастерская</a></li>
      <li><a href="#3" class="active">phpBB3х</a></li>      
      
<li><a href="#4">Форум</a></li>    
      
<li><a href="#5">Блог</a></li>     
   
</ul>
</
div

Создаём файл стиля с содержимым:

Код: Выделить всё

/* DANFA MENU */
#danfa_menu {
   float:left;
   width:100%;
   background:#ffffff;
   border-bottom:1px solid #4a6d9d;
   overflow:hidden;
   position:relative;
}
#danfa_menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#danfa_menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#danfa_menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#d6d6d6;
   color:#000000;
   text-decoration:none;
   font-weight:bold; 
   line
-height:1.3em;
}
#danfa_menu ul li a:hover {
   background:#999999;
   color:#000000;
   font-weight:bold;
}
#danfa_menu ul li a.active,
#danfa_menu ul li a.active:hover {
   color:#ffffff;
   background:#000000;
   font-weight:bold;
}

Меню готово! Я рекомендую вставлять это меню на шапку сайта, смотрится лучше.
Реклама

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость