Joomla 1.5 Дороботка стиля простого вертикального меню

Тема в разделе "Вопросы по работе с меню", создана пользователем Pugovka, 21.03.2011.

  1. Offline

    Pugovka Недавно здесь

    Регистрация:
    21.03.2011
    Сообщения:
    32
    Симпатии:
    0
    Пол:
    Женский
    Прошу вашей помощи! Вопрос, как я понимаю, довольно простой, но у меня он вызывает ступор уже на протяжении недели! В джумле я новичек, так что прошу сильно не ругать

    Накидала я сайт в html, чтобы точно знать какой результат хочу получить от joomla.
    Вот результат вертикального меню:
    Безымянный.jpg

    В Джумле же мне удалось реализовать только таким образом: 2.jpg

    Помогите исправить!!!!!!!:'(

    1) Категория меню (слинги) НЕ КРАСНОГО цвета, НЕТ ПОДЧЕРКИВАНИЯ, размер ПРЕЖНИЙ, МЕНЯЕТСЯ при наведении курсора
    2) межстрочный интервал у разделов большой
    3) отсутствие отступа у разделов относительно категории
    3.а) отступ появляется только при наведении указателя


    Кусок кода для левого меню (index.php)
    Код (PHP):
    1. <div id="leftmenu">
    2.         <div id="leftmenu_sl"> <!--для вывода меню СЛИНГИ-->
    3.             <jdoc:include type="modules" name="left_sl"/>
    4.         </div>
    5.         <div id="leftmenu_korm"> <!--для вывода меню ОДЕЖДА ДЛЯ КОРМЛЕНИЯ-->
    6.             <jdoc:include type="modules" name="left_korm"/>
    7.         </div>
    8.         <div id="leftmenu_tov"> <!--для вывода меню ДЕТСКИЕ ТОВАРЫ ДЛЯ ДОМА-->
    9.             <jdoc:include type="modules" name="left_tov"/>
    10.         </div>
    11.         <div id="leftmenu_nal"> <!--для вывода меню ТОВАРЫ В НАЛИЧИИ-->
    12.             <jdoc:include type="modules" name="left_nal"/>
    13.         </div>
    14.     </div>


    Стили css:

    Код (PHP):
    1. #leftmenu{
    2. float: left;
    3. padding: 0px 0px 0px 10px;
    4. width:180px;
    5. text-align: left;
    6. font-family: Segoe Print;
    7. line-height: 10px;
    8. text-indent: 25px;
    9. text-decoration: none;
    10. }
    11.  
    12. #leftmenu_sl_zag{
    13. float: left;
    14. font-size: 16px;
    15. color:red;
    16. }
    17.  
    18. .zsl{
    19. float: left;
    20. font-size: 26px;
    21. color:red;
    22. }
    23.  
    24. #leftmenu :link {     /*еще непосещенные ссылки*/
    25. line-height: 10px;
    26. font-family: Segoe Print;
    27. font-size: 14px;
    28. text-indent: 25px;
    29. color:black;
    30. text-decoration: none;
    31. }
    32.  
    33. #leftmenu :visited { /*посещенная ссылка*/
    34. line-height: 10px;
    35. font-family: Segoe Print;
    36. font-size: 14px;
    37. text-indent: 25px;
    38. color:black;
    39. text-decoration: none;
    40. }
    41.  
    42. #leftmenu_sl:active { /*нажатая ссылкк */
    43. line-height: 10px;
    44. font-family: Segoe Print;
    45. font-size: 16px;
    46. text-indent: 25px;
    47. color:red;
    48. /*font-weight: 600;*/
    49. text-decoration: none;
    50. }
    51.  
    52. #leftmenu_korm :active { /*нажатая ссылкк */
    53. line-height: 10px;
    54. font-family: Segoe Print;
    55. font-size: 16px;
    56. text-indent: 25px;
    57. color:e5ff00;
    58. /*font-weight: 600;*/
    59. text-decoration: none;
    60. }
    61.  
    62. #leftmenu_tov:active { /*нажатая ссылкк */
    63. line-height: 10px;
    64. font-family: Segoe Print;
    65. font-size: 16px;
    66. text-indent: 25px;
    67. color:0006ff;
    68. /*font-weight: 600;*/
    69. text-decoration: none;
    70. }
    71.  
    72. #leftmenu_sl :hover{
    73. line-height: 10px;
    74. font-family: Segoe Print;
    75. font-size: 16px;
    76. text-indent: 25px;
    77. color:red;
    78. text-decoration: none;              /*наведение курсора*/
    79. }
    80.  
    81.  
    82. #leftmenu_korm :hover{
    83. line-height: 10px;
    84. font-family: Segoe Print;
    85. font-size: 16px;
    86. text-indent: 25px;
    87. color:e5ff00;  
    88. text-decoration: none;          /*наведение курсора*/
    89. }
    90.  
    91. #leftmenu_tov :hover{
    92. line-height: 10px;
    93. font-family: Segoe Print;
    94. font-size: 16px;
    95. text-indent: 25px;
    96. color:0006ff;  
    97. text-decoration: none;          /*наведение курсора*/
    98. }
     
  2.  
  3. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    Я че то не совсем понял цель задания, конкретно обьясни че надо добавить
     
    Pugovka нравится это.
  4. Offline

    Pugovka Недавно здесь

    Регистрация:
    21.03.2011
    Сообщения:
    32
    Симпатии:
    0
    Пол:
    Женский
    Мне необходимо доработать меню в Joomla до внешнего вида меню html.
    А конкретно пункты, приведенные ниже:

    Понимаю, что дело с классами, суффиксами.... но реализовать самой никак не получается!
     
  5. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    тебе надо что бы при наведении менялось так это hover. все равно ничего не понял...
    тебе надо вид при наведении изменить или без наведения?
     
  6. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    пиши лучше в личку, желательно в контакт. id14848130
     
  7. Offline

    Pugovka Недавно здесь

    Регистрация:
    21.03.2011
    Сообщения:
    32
    Симпатии:
    0
    Пол:
    Женский
    у меня проблема в том, что я не понимаю, как можно изменять стили в самом меню.
    Т.е. как ,например, изменить категорию на красный цвет, а пункты меню ,например, на синий....
    Как я понимаю, дело в суффиксах....но я не понимаю куда их вставлять =(
     
  8. Offline

    Pugovka Недавно здесь

    Регистрация:
    21.03.2011
    Сообщения:
    32
    Симпатии:
    0
    Пол:
    Женский
    Проблема решена! Все оказалось гораздо проще! :)
    Может кому пригодится...

    Все изменения со стилем нао делать в css, используя классы, которые можно посмотреть в браузере! (у меня опера - там кликнуть правой кнопкой и далее на "проинспектировать элемент")

    Редактировать css таким макаром:
    (пример был приведен Trol'ем)
    Код (CODE):
    1. <div class="menu">
    2. <ul>
    3. <li class="m1">пунк 1</li>
    4. <li class="m2">пункт 2</li>
    5. </ul>
    6. </div>
    7. сделаем пункты меню синим, апри наведении красным в ксс
    8. .menu ul li { /*все пункты мню синими*/
    9. background:#0000ff;
    10. }
    11. .menu ul li :hover{ /*при наведении нужный пункт крассный*/
    12. background:#ff0000;
    13. }
    14.  
    15. добавим ко второму пункту меню что бы текст был побольше
    16. .menu ul li.m2 { /*добавляем класс, и пишем нужный код*/
    17. font-size:16px;
    18. }
    19.  
    20. вот помошник html и css htmlbook.ru

    За что большое спасибо Trol!
    [!][!][!]
     

Поделиться этой страницей

Загрузка...