Главная Блоги Блог админа

Выпадающее меню по вертикали.

Опубликовано:
Редактировалось: 1 раз — вчера в 12:44
Просмотров: 4304
+1↑
Голосов: 1

вот такое вот меню можно сделать лишь небольшим изменением style.css

Итак находим в стиле характристики topmenu

Находим #topmenu ul li ul {

Эта характеристика относится к второму уровню меню.

В нем находим строки

Код PHP:
  1. #topmenu ul li ul {
  2.     display:none;
  3.     position: absolute;
  4.     top: 105px;
  5.     //top:25px;
  6.     //left:0;
  7. 	width: 200px;
  8. 	background: #7cb743;
  9. 	color: #fff;
  10.     padding:0px;
  11.     z-index:1000;
  12.     box-shadow:1px 1px 3px #000;
  13.     -moz-box-shadow:1px 1px 3px #000;
  14.  

Меняем

Код PHP:
  1. #topmenu ul li ul {
  2.     display:none;
  3.     position: absolute;
  4.     top: 105px;
  5.     //top:25px;
  6.     //left:0;
  7. 	width:auto; \\\ширина 
  8. 	margin-left: -100px; \\\отступ к левой стороне
  9. 	background: #7cb743;
  10. 	color: #fff;
  11.     padding:0px;
  12.     z-index:1000;
  13.     box-shadow:1px 1px 3px #000;
  14.     -moz-box-shadow:1px 1px 3px #000;
  15.  

Дальше находим

Код PHP:
  1. #topmenu ul li ul li,  #topmenu ul li ul li a{
  2.     display:block;
  3.     width:100%;
  4. }
  5.  

меняем обтекание пунктов

Код PHP:
  1. #topmenu ul li ul li,  #topmenu ul li ul li a{
  2.     display:inline-block;
  3.     float: left;
  4. }

И получаем красивое меню.
Теги: меню, изменение, instantcms

Голосуем

Самый нужный компонент