Иконки в меню сайта
-
Я разобрался как их ставить,только один баг есть, когда указываю название иконки в Классы CSS в настройках меню, он появляется в меню но очень много дублируется почему-то тем самым закрывая и все что есть на кнопке, в чем проблема кто знает? может кроме названия файла надо еще что-то добавлять?
-
вот код навигации из стайл.цсс может кому-то что-то скажет )
/* ====================== START NAV ====================== */ #nav { padding-bottom:2px; position:relative; z-index:100; /*slider*/ } #nav, #nav ul.level-1 { float:right; margin:auto; list-style:none; margin-top:38px; background-color:#dedddd; border:1px solid #eeeeee; } #nav, #nav .border-left, #nav .border-right, #nav .nav { height:56px; } #nav ul.level-1 { display:block; list-style:none; margin:0; border:1px solid #cbcbcb; } #nav li { float:left; position:relative; height:100%; cursor:pointer; } #nav li:first-child a, #nav li.first a { border-left:none; } #nav li:last-child a, #nav li.last a { border-right:none; } #nav li a { display:block; line-height:34px; color:#858484; font-size:14px; text-transform:uppercase; margin:11px 0; padding:0 15px; border-right:1px solid #c5c3c4; border-left:1px solid #e7e5e5; } #nav li a:hover, #nav li.current-menu-item a, #nav li.current-menu-parent a { text-decoration:none; color:#4f4f4f; } #nav li.current-menu-item, #nav li.current-menu-parent { background:url('images/bg/gradient-nav.png') center bottom no-repeat; } #nav li:hover, #nav li ul.sub-menu { background:#cbcbcb; } #nav .border-left, #nav .border-right { width:14px; background-repeat:no-repeat; } #nav li.current-menu-item a, #nav li:hover a { border-left-color:#cbcbcb } #nav ul.sub-menu { display:none; position:absolute; left:0; list-style:none; margin:0; padding-top:6px; width:237px; } #nav ul.sub-menu li { width:225px; background-color:#dddcdc; margin:0 6px 6px; position:relative; } #nav ul.sub-menu li:hover { background-color:#eae9e9; } #nav ul.sub-menu li a { font-size:13px; color:#0b0b0b; text-transform:none; line-height:18px; border:0; margin-right:10px; } #nav ul.sub-menu li a span { font-style:italic; color:#515050; font-size:12px; } #nav ul.sub-menu li ul.sub-menu { top:-6px; } #nav ul.sub-menu li.sub a { background:url('images/icons/arrow-circle.png') right center no-repeat; } #nav ul.sub-menu li ul.sub-menu a { background:none; } /*differents*/ .font_chunkfive #nav li a { letter-spacing:-1px; } /*icons*/ #nav ul.sub-menu li.icon a { padding-left:50px; } #nav ul.sub-menu li.icon { background-position:10px center; background-repeat: no-repeat; } #nav ul.sub-menu li.user { background-image:url('images/icons/nav/user.png') } #nav ul.sub-menu li.faq { background-image:url('images/icons/nav/faq.png') } #nav ul.sub-menu li.download{ background-image:url('images/icons/nav/download.png') } #nav ul.sub-menu li.upload { background-image:url('images/icons/nav/upload.png') } #nav ul.sub-menu li.check { background-image:url('images/icons/nav/check.png') } #nav ul.sub-menu li.circle { background-image:url('images/icons/nav/circle.png') } #nav ul.sub-menu li.folder { background-image:url('images/icons/nav/folder.png') } #nav ul.sub-menu li.home { background-image:url('images/icons/nav/home.png') } #nav ul.sub-menu li.letter { background-image:url('images/icons/nav/letter.png') } /*border-radius*/ #nav, #nav ul.level-1 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } #nav ul.sub-menu li { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #nav li:first-child, #nav li.first a { -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #nav li:last-child, #nav li.last a { -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } /* nojs */ body.no_js #nav ul li:hover > ul { display:block } body.no_js #nav ul li ul.submenu li:hover > ul { display:block } /* ====================== END NAV ====================== */
кроме названия файла надо еще что-то добавлять?
background-repeat:none;
Это где добавить в код? если можно пальцем покажите) , а к названию файла в настройках меню — Классы СSS , нельзя добавить такой код, т.к. он там не принимает спец символы, только нижнее подчеркивание и тире ну мож еще что-то я не в курсе, а так из этой надписи вышло следующее) — letter background-repeatnone
туда же где и background-image, только значение не none, а no-repeat. Ошибся я 🙂
Ага да помогло, только теперь иконка стоит по умолчанию видимо в левом-верхнем углу меню, но самое главное она не двигает название и подпись меню а налазит на него(
вообщем главные настройки для иконок меня почему-то не работают надо все блоки продублировать для каждой иконки, ну это мелочи. Проблема осталась в том, что когда вставляется иконка в подменю, она налазит на него и тем самым закрывает название самого подменю и его описания, как можно исправить эту проблему — чтобы если вставляется иконка для подменю она двигала название подменю.
- Тема «Иконки в меню сайта» закрыта для новых ответов.