Главная Форум Графика и шаблоны, стили css

[РЕШЕНО] Как можно реализовать разные стили для меню?

То есть, есть верхнее и вертикальное меню, для них сделать разные стили.
zaq - 26 июня 2012, вторник
:0
#1
zaq
Здравствуйте!
Подскажите, как можно реализовать разные стили меню, то есть, есть верхнее меню (горизонтальное) у него класс - menu, и когда создаем "Дополнительное меню 1" (вертикальное), и для этого меню смотрим класс, то для него тот же класс, что и для верхнего меню. То есть, если задать для доп.меню класс - menu, то верхнее меню будет тоже такое, как вертикальное. Нужно сделать, чтобы для верхнего меню были свои стили, а для доп.меню(ссылок) свои. Смотрел в файле - mod_menu.tpl, там можно поменять класс, но он идет для обоих меню.
Gorec - 26 июня 2012, вторник
:0
#2
Gorec
Скоро мне самому понадобиться сделать различные варианты меню, пока у меня такая мысль в голове.
Для первого меню
Код PHP:
  1.  
  2. #oneMenu{ 
  3. styles:style;
  4. styles:style;
  5. styles:style;
  6. }
  7. #oneMenu .menu {
  8. styles:style;
  9. styles:style;
  10. styles:style;
  11. } /ну там li, a, ul,
  12. #two {
  13. width:450px;
  14. }
  15. #two .menu {
  16. styles:style;
  17. styles:style;
  18. styles:style;
  19. }
  20.  
Ну вот так вот я собираюсь сделать. То еть если у меня есть позиция one то добавить к ней стили и для модуля.
""
Gorec - 26 июня 2012, вторник
:0
#3
Gorec
Подглядел у стилей сайдаба такое
""
zaq - 26 июня 2012, вторник
:0
#4
zaq
Пробовал как Вы говорили, но нечего не получается (#menu10 ul.menu li a). Нужно сделать, чтобы, например, верхнее меню было зеленым (то есть ссылки или фон), а доп.меню было синем (то есть ссылки или фон). Независимо от того какое будет доп.меню (1, 2, 3, 4, 5...), по-умолчанию есть 15шт., нужно, чтобы все 15шт. имели один и тот же стиль (синий). Смотрел по разным шаблонам, но там просто ссылки без стилей. У шаблонов от Dezerit, такое реализовано, но там нечего не понятно.

Вот скришот верхнего меню:
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Вот скришот доп.меню:
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Еще ссылка на шаблон от Dezerit - demo.dezerit.org.ua/#ic-coloricity
Gorec - 26 июня 2012, вторник
:0
#5
Gorec
Должно получиться, вот в скрине верхнему и нижнему применены разные стили осталось только чуточку изменить. Я сейчас занят чуть позже попробую сделать, а вы все это на шаблоне дезерита хотите сделать?
""
zaq - 26 июня 2012, вторник
:0
#6
zaq
Нет, не на его. На своем. Я просто это увидел у него. Но так и не смог реализовать.
Надеюсь Вы поможете.
Gorec - 26 июня 2012, вторник
:0
#7
Gorec
Во втором ничего сложного нет, и кстати я особо не разбираюсь а пмогаю вам потому что самому скоро понадобятся такие вот решения. Дайте мне пожалуйста классы позиций куда вы хотите установить модули меню
""
zaq - 26 июня 2012, вторник
:0
#8
zaq
Спасибо.
Доп.меню ставлю в позицию - right - это у меня - id. Class у верхнего и доп.меню по-умолчанию - menu. Если я правильно Вас понял.
Gorec - 27 июня 2012, среда
:0
#9
Gorec
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
""
Gorec - 27 июня 2012, среда
:0
#10
Gorec
Ну вот смотрите я сделал у себя два разных меню, один горизонтальный другой вертикальный и у обоих разные фоны и стили
""
Gorec - 27 июня 2012, среда
:0
#11
Gorec
Код PHP:
  1.  
  2. /******************************* Верхнее меню *********************************/
  3. #topmenu{
  4. }
  5. #topmenu .menu{ list-style:none; margin-top:-60px; padding:0; }
  6. #topmenu .menu li a{ text-decoration:none; }
  7. #topmenu .menu li{
  8.     list-style:none; 
  9.     margin:0;
  10.     padding:0;
  11.     height:40px;
  12.     line-height:40px;
  13.     display:inline-block;
  14. 	//display: inline;
  15. 	zoom: 1;
  16.     font-size:18px;
  17.     //position: relative;
  18. }
  19.  
  20. #topmenu .menu li.selected{
  21.     background:url(../images/menubg.jpg) no-repeat; 
  22. 	center 0; 
  23. 	height:46px;
  24.  
  25. }
  26.  
  27. #topmenu .menu li.selected a.selected{
  28.     color: #00b4ff;
  29.     background:url(../images/menubg-hover.png) no-repeat;
  30. 	background-position:bottom ;
  31. 	height:40px;
  32. 	text-decoration:none;
  33. }
  34.  
  35. #topmenu .menu li a.hover{
  36.     background:url(../images/menubg-hover.png) no-repeat;  
  37. 	background-position:bottom ;
  38. 	center 0; 
  39. 	height:40px;
  40.     color:#666 !important;
  41. }
  42.  
  43. #topmenu .menu li a{
  44.     padding:0px 10px;
  45.     color:#888;
  46.     height:40px; 
  47.     line-height:40px;
  48.     display:inline-block;
  49. }
  50.  
  51. #topmenu ul li ul {
  52.     display:none;
  53.     position: absolute;
  54.     margin-top:0px;
  55.     //left:0;
  56. 	width: 210px;
  57. 	background: url("../images/menubarli.jpg") repeat;
  58. 	color: #000;
  59.     padding:0px;
  60.     z-index:1000;
  61.     box-shadow:1px 1px 3px #000;
  62.     -moz-box-shadow:1px 1px 3px #000;
  63. 	border-radius:0px 0px 5px 5px;
  64. }
  65. #topmenu ul li ul li ul {
  66.     display:none;
  67.     position: relative;
  68.     margin-top:-120px;
  69.     left:200px;
  70. 	width: 200px;
  71. 	background: #E9E9E9;
  72. 	color: #000;
  73.     padding:0px;
  74.     z-index:1000;
  75.     box-shadow:1px 1px 3px #000;
  76.     -moz-box-shadow:1px 1px 3px #000;
  77. }
  78.  
  79. #topmenu ul li ul li,  #topmenu ul li ul li a{
  80.     display:block;
  81.     width:100%;
  82. }
  83.  
  84. #topmenu ul li ul li a{
  85.     padding:0px !important;
  86.     text-decoration:none;
  87. }
  88. #topmenu ul li ul li a span{
  89.     margin:0px 10px;
  90.     padding:0px;
  91. }
  92.  
  93. #topmenu ul li ul li a.selected span{
  94.     text-decoration:none;
  95. }
  96.  
""
zaq - 27 июня 2012, среда
:0
#12
zaq
Gorec,
Большое Вам спасибо. Очень помогли. Разобрался во всём.
← [РЕШЕНО] Проблема при... | Подскажите где искать →
Перейти на форум:

Голосуем

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