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

+14
1.5K
Когда была версия 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. }
Пример можно посмотреть здесь и здесь
0
Malstein Malstein 12 лет назад #
Спасибо за урок!)
0
Александр Александр 12 лет назад #
Благодарю, но Больше интересует как сделать вот как было раньше вывод меню пользователя

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

Еще от автора

Другие колонки для шаблона
Приветствую сообщество. Давненько меня тут не было))) По просьбе raiden сделал вывод еще одного sidebar-а.
"Фейк" Фейсбука для 1.10.1
После длительного отсутствия - почти год), шаблон для 1.10.1 ---- по неоднократным просьбам ---- Продолжение этой темы.
Модуль "Последние комментарии" с прокруткой
Используем те же файлы, что и в предыдущем моем посте, меняем только mod_comments.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.