как сделать из обычного mainmenu-меню с картинками?

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

  1. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    мне необходимо вместо mainmenu сделать логотипы и ссылки.как быть? скачала компонент thumbnailspro.zip для создания графического меню,подскажите смогу я в нём заменить картинки на свой логотип? и если нет то как мне это сделать?
     
  2.  
  3. banzaykz
    Offline

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

    Регистрация:
    30.07.2008
    Сообщения:
    51
    Симпатии:
    2
    Пол:
    Мужской
    Mod_AndyR_Button v.1.0
    В Joomla! 1.0.15 Lavra Edition 2008 от Nestora входит как стандартный модуль.
     
  4. -=phenix=-
    Offline

    -=phenix=- Недавно здесь

    Регистрация:
    01.09.2008
    Сообщения:
    64
    Симпатии:
    2
    Пол:
    Мужской
    Вариант сделать их css буквально 5 минут назад описывал - http://joomla-support.ru/nextnewesttothread7898.html

    То есть каждому элементу меню по item№ прописать background:= логотип - а надпись убрать line-heating
    Пример подмены ссылок иконками: http://westele.com.ua/
    Код css:

    div#top_menu { margin-left:250px; padding-top:15px;}
    #top_menu li {display:block; float:left; background:url(../images/bg/bg_blue_separator.gif) right no-repeat; height:16px; width:35px; margin-right:15px;}
    #top_menu a {display:block; height:16px; width:35px; overflow: hidden; line-height:999px;}
    #top_menu .item1 a {background:url(../images/ico/ico_home.gif) no-repeat; width:25px;}
    #top_menu li.item1 {width:25px;}
    #top_menu .item2 a {background:url(../images/ico/ico_map.gif) no-repeat;}
    #top_menu .item3 a {background:url(../images/ico/ico_login.gif) no-repeat;}
    #top_menu .item4 a {background:url(../images/ico/ico_contact.gif) no-repeat;}
    #top_menu li.item4 {background:none;}

    Итогом мы получаем 4 замечательные иконки вместо текстовой ссылки
     
  5. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    у меня joomla 1.0.15 RE
    дело в том,что мне нужен логотип и рядом ссылка. а возможно раздвинуть пункты меню так чтобы вставить туда картинку? по ширене получается а по высоте не могу найти где поменять нужно.
    вот шаблон www.nkp.ru (в нем вместо меню слева нужно лого+ссылка)
     
  6. -=phenix=-
    Offline

    -=phenix=- Недавно здесь

    Регистрация:
    01.09.2008
    Сообщения:
    64
    Симпатии:
    2
    Пол:
    Мужской
    Я специалист по верстке вообще - а не по джумле в частонсти :) - и обычно css, да и весь шаблон, пишу сам почти с 0.
    Итак - задача - есть н ссылок слева от которых должен быть логотип 20х20 пикселей
    Кладем фоном логотип - а padding-left:20px сдвигаем с него ссылку
    Ничего сложного не вижу ... Для примера -
    http://savrox-models.art-od.com/
    Угу - это джумловое меню. Только привязка изображения девушки (160х60) спозиционировано под ссылку а не слева - и выбиарется случайно)
    Обрати внимание на ссылку - подробнее - в начале стоит указатель. на само деле это картинка описана вот таким стилем:
    a.readon {font-size:0.8em; background:url(../images/bg/bg_arrow_readmore.gif) left no-repeat; padding-left:10px; color:#FFFF00; text-decoration:none;}
    То есть - элементу а даем фон, жмем его влево - а саму ссылку отодвигаем на 10 пикслелей от левого края.
    P.S. Вот токи я не работал с версией 15РЕ - не знаю как она размечает элементы меню - если не сложно - дайте ка линк на какой то сайт (или даже пару сайтов) под ее управлением - сразу станет все понятно
     
  7. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    какой же вы умный! спасибо. я попробую, я вот совсем новичок в этом деле и всё очень долго пока соображаю:[
     
  8. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    логотипы появились,только они заходят лруг на друга вот css
    /* ################### MAIN AND SUB MENU SYSTEM ################### */

    .modules {
    background : #FFFFFF;
    border : 1px solid #C0C0C0;
    }

    .mainlevel {
    letter-spacing : 2px;
    padding-left : 25px;
    width : 90%;
    }

    a.mainlevel:link, a.mainlevel:visited {
    color : #285078;
    background : url("../images/icon01.gif");
    background-repeat: no-repeat;
    }

    a.mainlevel:hover {
    color : #06b45c;
    background : url("../images/icon02.gif");
    background-repeat: no-repeat;
    }

    .sublevel {
    letter-spacing : 2px;
    padding-left : 7px;
    }

    table.moduletable {
    padding: 5px 0px 5px 8px;
    margin-bottom: 15px;
    width: 100%;
    background: url(../images/bgr.png);
    }

    table.moduletable th {
    font-size : 11px;
    font-weight : bold;
    color : #000000;
    text-align : center;
    letter-spacing : 2px;
    border-bottom : 1px solid #AFD1F4;
    }

    table.moduletable td {
    font-size : 10px;
    font-weight : normal;
     
  9. -=phenix=-
    Offline

    -=phenix=- Недавно здесь

    Регистрация:
    01.09.2008
    Сообщения:
    64
    Симпатии:
    2
    Пол:
    Мужской
    То есть заходят друг на друга - можно URL?
    Енто - если скажем иконка icon01.gif имеет 25х25 пикселей - то получится бяда - не будут помещаться иконки в размер...
    Тогда поступим так:

    .mainlevel {

    display:block; /*Изменим тип отображения на блочный*/
    heading:25px; /* зададим высоту*/
    marging:5px 0px; /* здадим отсуп сверху и снизу*/
    padding-left : 25px; /* отступим внутри 25 в лево*/

    letter-spacing : 2px;
    width : 90%;
    }
     
  10. -=phenix=-
    Offline

    -=phenix=- Недавно здесь

    Регистрация:
    01.09.2008
    Сообщения:
    64
    Симпатии:
    2
    Пол:
    Мужской
    heading:25px; /* зададим высоту*/
    Сорри - очепятка вышла :)
    height - вот правильно :) :)
     
  11. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    http://www.ncpbroker.ru/index.php?option=com_content&task=view&id=24&Itemid=41
     
  12. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    :):):):) получилось!!!!! огромнейшее спасибо!
     
  13. -=phenix=-
    Offline

    -=phenix=- Недавно здесь

    Регистрация:
    01.09.2008
    Сообщения:
    64
    Симпатии:
    2
    Пол:
    Мужской
    a:link, a:visited {template_css.css (line 224)
    color:#0B7FC8;
    font-family:Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;

    padding-top:15px; /* Добавь отсуп сверху что бы текстовка стала по центру от логотипа*/

    text-decoration:none;
    }

    css как таковой сложно работает с позиционированием по центру по высоте :( - я до сих пор избегаю как могу такие приемы верстки

    Почитай про favicon - полезная штука - поставь на сайте
    А так - вроде ничего так - аккуратненько ...
    А ка кначинающей - могет лучше на клоне Joomla 1.5.7 всетаки работать - в ней я уже вижу возможностей стало нааамного больше
     
  14. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    не получилосб выровнять(

    /* ###################### LINKS ###################### */
    a:link, a:visited {
    font-size : 11px;
    color : #0b7fc8;
    text-decoration : none;
    font-family : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    padding-top : 15px;


    }

    a:hover {
    color : #06b45c;
    text-decoration : none;
    }

    a.category:link, a.category:visited {
    color : #285078;
    font-weight : bold;
    letter-spacing : 1px;
    }

    a.category:hover {
    color : #CC6600;
    }
     
  15. -=phenix=-
    Offline

    -=phenix=- Недавно здесь

    Регистрация:
    01.09.2008
    Сообщения:
    64
    Симпатии:
    2
    Пол:
    Мужской
    Не там ты его (отступ) прописала - нужно в тот который у тебя за ссылки меню отвечает
    https://addons.mozilla.org/ru/firefox/addon/1843 - вот полезное дополнение к ФФ - сможешь видетьс разу где какой элемент и какой стиль используешь
     
  16. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    спасибо за помощь!
     
  17. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    :[у меня появился ещё вопрос.
    Подскажите,что мне нужно добавить в css теперь чтобы в mainmenu логотипы сделать разные(одного размера,только немного видоизменённые)?
    само меню здесь http://www.ncpbroker.ru/
    а вот сss:
    /* ################### MAIN AND SUB MENU SYSTEM ################### */
    .modules {
    background : #FFFFFF;
    text-decoration : none;
    }
    .mainlevel {

    display:block;
    height:80px;
    marging:20px 10px;
    padding-left : 90px;

    letter-spacing : 1px;
    width : 40%;
    }
    a.mainlevel:link, a.mainlevel:visited {
    color : #285078;
    background : url("../images/icon01.gif");
    background-repeat: no-repeat;
    padding-top : 20px;
    text-decoration : none;
    }
    a.mainlevel:hover {
    color : #06b45c;
    background : url("../images/icon02.gif");
    background-repeat: no-repeat;
    .sublevel {
    letter-spacing : 2px;
    padding-left : 90px;
    }
    table.moduletable {
    padding: 5px 0px 5px 8px;
    margin-bottom: 50px;
    width: 100%;
    background: url(../images/bgr.png);
    }
    table.moduletable th {
    font-size : 11px;
    font-weight : bold;
    color : #000000;
    text-align : center;
    letter-spacing : 2px;
    border-bottom : 1px solid #AFD1F4;
    }
    table.moduletable td {
    font-size : 10px;
    font-weight : normal;
    }
     
  18. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 094
    Симпатии:
    158
    Пол:
    Мужской
    Sofia, можно вообще css не трогать, а задать иконки через админку в редактировании этих пунктов меню. Можно и через css, нужно использовать меню, где можно присваивать каждому пункту меню свой ID
     
  19. Offline

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

    Регистрация:
    30.10.2008
    Сообщения:
    24
    Симпатии:
    0
    Fanamura, а как присвоить каждому пункту меню свой ID? извини,если вопрос нелепый
     
  20. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 094
    Симпатии:
    158
    Пол:
    Мужской
  21. Offline

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

    Регистрация:
    27.01.2009
    Сообщения:
    8
    Симпатии:
    0
    Наконец-то нашел! То, что нужно.:)
     

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

Загрузка...