Найти на сайте

Простой способ сделать вертикальное меню

+14
1.56K
  2. Блоги
  3. Простой способ сделать вертикальное меню
Когда была версия 1.6 всем надо было горизонтальное меню, сейчас же часто необходимо сделать вертикальное.
Сразу оговорюсь: это заготовка для Вашего меню, поэтому не говорите, что менюшка простая, что надо было как-то разукрасить, финтифлюшек понавесить, это всё сделаете сами.
ИллюстрацияИллюстрация

Делаем так:
1. В админке создаем новое меню — menu1

2. Вставляем в styles.css (это пример)
  1. #menu1 {
  2. 	margin:0;
  3. 	padding:0px;
  4. }
  5. #menu1 li{
  6. text-align: center;
  7. 	margin: 0 auto;
  8. 	padding:0px;
  9. 	list-style-position:outside;
  10. 	list-style:none;
  11.         height:30px;
  12. 	line-height:30px;
  13. 	width:100%;
  14. }
  15. #menu1 li:hover,
  16. #menu1 li.hover{
  17. 	list-style-position:outside;
  18. 	list-style:none;
  19. }
  20. #menu1 li a:hover,
  21. #menu1 li a.hover{
  22.     color:#FF6868 !important;
  23.     text-shadow:0 1px 0px #FF6868 !important;
  24. }
  25. #menu1 li a{
  26.         height:30px;
  27. 	font-size:14px;
  28. 	font-weight:700;
  29. 	color:#FF6868;
  30. 	text-transform:uppercase;
  31. 	text-decoration:none;
  32. 	padding:0px;
  33. 	width:100%;
  34. 	margin-bottom:0px;
  35. 	letter-spacing: 3px;
  36. }
  37. #menu1 li ul{
  38. 	padding-left:0px;
  39. }
  40. #menu1 li span{
  41. 	padding-left:0px;
  42. }
Таким способом можно сделать несколько меню, полностью отличающихся оформлением.
Нужно чтобы "Дополнительному меню 1" соответствовало menu1, "Дополнительному меню 2" соответствовало menu2, и т.д.

Здесь выставляем выравнивание (по центру или к краю)
  1. #menu1 li{
  2. text-align: center;
  3. 	margin: 0 auto;
  4. 	padding:0px;
  5. 	list-style-position:outside;
  6. 	list-style:none;
  7.         height:30px;
  8. 	line-height:30px;
  9. 	width:100%;
  10. }
Пример можно посмотреть здесь и здесь
Реинкарнация шаблона "Internet" для 1.9
Шаблон для мобильных устройств
0
Malstein Malstein 12 лет назад #
Спасибо за урок!)
0
Александр Александр 12 лет назад #
Благодарю, но Больше интересует как сделать вот как было раньше вывод меню пользователя

Конечно могу и сам, но может кто-то уже сделал?
LonelyCat LonelyCat 12 лет назад #
Комментарий удален
+1
Soul Soul 12 лет назад #
Посмотри здесь.

Еще от автора

Другие колонки для шаблона

Другие колонки для шаблона

Приветствую сообщество. Давненько меня тут не было))) По просьбе raiden сделал вывод еще одного sidebar-а.
25
"Фейк" Фейсбука для 1.10.1

"Фейк" Фейсбука для 1.10.1

После длительного отсутствия - почти год), шаблон для 1.10.1 ---- по неоднократным просьбам ---- Продолжение этой темы.
31
Модуль "Последние комментарии" с прокруткой

Модуль "Последние комментарии" с прокруткой

Используем те же файлы, что и в предыдущем моем посте, меняем только mod_comments.
11

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.