Joomla 1.5 подскажите как сделать такое меню

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем woojin, 14.06.2010.

  1. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    каким образом сделать такое меню как на картинке?
    чтобы когда пункт меню был активен его обрамляла рамочка (как на картинке)
    уже излазил весь форум но так ничего и не нашел

    желательно конечно чтобы еще и можно было растянуть не только подложку но и сами рамочки на пунктах, если вдруг кому захочется что либо большое туда вставить - в смысле текст

    если можно то с кодом CSS и PHP

    заранее спасибо ответившим
     

    Вложения:

  2.  
  3. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    а забейте, я сделал просто прямоугольную рамочку желтого цвета
     
  4. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    решение вот такое:
    Код (CODE):
    1. #menu_top {
    2.     background-image:url(../images/menu.png); /* это подложка под все пункты */
    3.     background-repeat: no-repeat;
    4.     float: left;
    5.     width: 620px;
    6.     margin-top: 12px;
    7.     margin-right: 50px;
    8.     margin-left: 50px;
    9.     text-transform: uppercase;
    10. }
    11. .menu {
    12.     font-size: 10px;
    13.     margin-top: 8px;
    14.     margin-left: 16px;
    15.     height: 24px;
    16.     padding: 0;
    17.     padding-left: 10px;
    18.     display: block;
    19.     white-space: nowrap;
    20. }
    21. .menu ul{
    22.     margin: 0 auto;
    23.     display: block;
    24. }
    25. .menu li {
    26.     float: left;
    27.     position: relative;
    28.     padding-left: 8px;
    29.     padding-right: 9px;
    30. }
    31. .menu #current {
    32.     position: relative;
    33.     margin-left: -15px;
    34.     margin-right: -16px;
    35. }
    36. .menu #current span {
    37.     position: relative;
    38.     background-image: url(../images/menu1.png); /* это левая часть обводки */
    39.     background-position: left center;
    40.     padding-top: 6px;
    41.     padding-bottom: 7px;
    42.     padding-left: 15px;
    43. }
    44. .menu #current a {
    45.     position: relative;
    46.     background-image: url(../images/a_m.png); /* это правая часть обводки */
    47.     background-position: right center;
    48.     background-repeat: no-repeat;
    49.     padding-right: 16px;
    50.     padding-top: 6px;
    51.     padding-bottom: 7px;
    52. }

    Код (html):
    1. <div id="menu_top">
    2.         <jdoc:include type="modules" name="user4" style="none" />
    3. </div>

    во вложении файлики с использованными картинками - может кому пригодится
     

    Вложения:

    • menu.png
      menu.png
      Размер файла:
      3.3 КБ
      Просмотров:
      10
    • menu1.png
      menu1.png
      Размер файла:
      1.7 КБ
      Просмотров:
      32
    • a_m.png
      a_m.png
      Размер файла:
      1.5 КБ
      Просмотров:
      32

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

Загрузка...