Сake (25 Январь 2014 - 02:42) писал:
Выпадающее Меню
#221
Отправлено 27 Январь 2014 - 14:58
#222
Отправлено 28 Январь 2014 - 02:36
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} <ul class="menuHeader" > <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> </li> </ul> {%ENDFOR%} {%ENDIF%} </div> <!-- /Каталог товаров -->замените на:
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} <ul class="menuHeader" > {%FOR catalog_full%} <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> </li> {%ENDFOR%} </ul> {%ENDIF%} </div> <!-- /Каталог товаров -->
Далее код, что вы выше привели все #menu замените на #headermenu
Также все /images/ замените на {ASSETS_IMAGES_PATH}
Сам код, что вы привели вставьте в конце файла style.css
Не забудьте загрузить картинки от нового меню в раздел Редактор шаблонов
#223
Отправлено 28 Январь 2014 - 14:39
Vaccina (28 Январь 2014 - 02:36) писал:
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} <ul class="menuHeader" > <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> </li> </ul> {%ENDFOR%} {%ENDIF%} </div> <!-- /Каталог товаров -->замените на:
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} <ul class="menuHeader" > {%FOR catalog_full%} <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> </li> {%ENDFOR%} </ul> {%ENDIF%} </div> <!-- /Каталог товаров -->
Далее код, что вы выше привели все #menu замените на #headermenu
Также все /images/ замените на {ASSETS_IMAGES_PATH}
Сам код, что вы привели вставьте в конце файла style.css
Не забудьте загрузить картинки от нового меню в раздел Редактор шаблонов
#headermenu{ width:100%; } #headermenu ul{ list-style:none; } #headermenu li{ list-style:none; display:block; float:left; } #headermenu li a{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; } #headermenu li a:hover{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; height:66px; } #headermenu li a:hover span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; color:#fff; height:66px; } #headermenu li a.current{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a.current span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; }так же код html который тоже пробовала вставлять в в файл html
<div id="menu"> <ul> <li><a href="#" class="current"><span>Главная</span></a></li> <li><a href="#"><span>Регистрация</span></a></li> <li><a href="#"><span>Поиск</span></a></li> <li><a href="#"><span>Карта сайта</span></a></li> <li><a href="#"><span>О нас</span></a></li> </ul> </div>Сейчас меню выглядит вот так (скрин), при наведении работает
#224
Отправлено 28 Январь 2014 - 20:48
#headermenu li a { display: block; float: left; height: 66px; color: #fff; text-transform: uppercase; font-size: 11px; font-weight: bold; background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; }и замените его на
#headermenu li a { display: block; float: left; height: 66px; color: #000; text-transform: uppercase; font-size: 11px; font-weight: bold; background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; }
#225
Отправлено 29 Январь 2014 - 20:43
Stasya (28 Январь 2014 - 20:48) писал:
#headermenu li a { display: block; float: left; height: 66px; color: #fff; text-transform: uppercase; font-size: 11px; font-weight: bold; background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; }и замените его на
#headermenu li a { display: block; float: left; height: 66px; color: #000; text-transform: uppercase; font-size: 11px; font-weight: bold; background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; }
#226
Отправлено 30 Январь 2014 - 03:50
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>замените на:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a>
#227
Отправлено 30 Январь 2014 - 08:13
Vaccina (30 Январь 2014 - 03:50) писал:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>замените на:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a>
#229
Отправлено 30 Январь 2014 - 11:18
miyako (30 Январь 2014 - 09:16) писал:
#230
Отправлено 30 Январь 2014 - 12:08
Elif (30 Январь 2014 - 11:18) писал:
Здравствуйте, не могли бы вы прислать сайт, на котором находится данное меню, мы поможем вам его установить на ваш сайт.
#231
Отправлено 30 Январь 2014 - 13:19
<div id="menu"> <ul> <li><a href="#" class="current"><span>Главная</span></a></li> <li><a href="#"><span>Регистрация</span></a></li> <li><a href="#"><span>Поиск</span></a></li> <li><a href="#"><span>Карта сайта</span></a></li> <li><a href="#"><span>О нас</span></a></li> </ul>
Можете дать ссылку с работающим демо меню или с инструкцией? Возможно какие-то стили не добавлены.
#232
Отправлено 30 Январь 2014 - 17:33
miyako (30 Январь 2014 - 13:19) писал:
<div id="menu"> <ul> <li><a href="#" class="current"><span>Главная</span></a></li> <li><a href="#"><span>Регистрация</span></a></li> <li><a href="#"><span>Поиск</span></a></li> <li><a href="#"><span>Карта сайта</span></a></li> <li><a href="#"><span>О нас</span></a></li> </ul>
Можете дать ссылку с работающим демо меню или с инструкцией? Возможно какие-то стили не добавлены.
#233
Отправлено 30 Январь 2014 - 18:12
Elif (30 Январь 2014 - 17:33) писал:
Здравствуйте, для того чтобы установить такое меню выполняем следующие инструкции.
Добавляем файлы изображения (см. в прикрепленных) через Редактор шаблонов Добавить файлы
Приступаем к редактированию шаблона HTML
Находим
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} <ul class="menuHeader" > {%FOR catalog_full%} <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> </li> {%ENDFOR%} </ul> {%ENDIF%} </div> <!-- /Каталог товаров -->
Заменяем на
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} <ul> {%FOR catalog_full%} <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a> </li> {%ENDFOR%} </ul> {%ENDIF%} </div> <!-- /Каталог товаров -->
Далее добавляем данный код стилей в style.css
#headermenu{ width:100%; } #headermenu ul{ list-style:none; } #headermenu li{ list-style:none; display:block; float:left; } #headermenu li a{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; } #headermenu li a:hover{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; height:66px; } #headermenu li a:hover span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; color:#fff; height:66px; } #headermenu li a.current{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a.current span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; }
#234
Отправлено 31 Январь 2014 - 00:52
Castiel (30 Январь 2014 - 18:12) писал:
Добавляем файлы изображения (см. в прикрепленных) через Редактор шаблонов Добавить файлы
Приступаем к редактированию шаблона HTML
Находим
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} <ul class="menuHeader" > {%FOR catalog_full%} <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> </li> {%ENDFOR%} </ul> {%ENDIF%} </div> <!-- /Каталог товаров -->
Заменяем на
<!-- Каталог товаров --> <div id="headermenu"> {%IFNOT catalog_full_empty%} <ul> {%FOR catalog_full%} <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a> </li> {%ENDFOR%} </ul> {%ENDIF%} </div> <!-- /Каталог товаров -->
Далее добавляем данный код стилей в style.css
#headermenu{ width:100%; } #headermenu ul{ list-style:none; } #headermenu li{ list-style:none; display:block; float:left; } #headermenu li a{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; } #headermenu li a:hover{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; height:66px; } #headermenu li a:hover span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; color:#fff; height:66px; } #headermenu li a.current{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a.current span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; }
#235
Отправлено 31 Январь 2014 - 03:50
#headermenu li a span { background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right center rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 66px; line-height: 43px; padding: 0 14px 0 6px; }замените на:
#headermenu li a span { background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right top rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 45px; line-height: 43px; padding: 0 14px 0 6px; }далее найдите:
#headermenu li a { background: url("http://design.elif-shop.kz/menu_left.jpg") no-repeat scroll left center rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; font-size: 11px; font-weight: bold; height: 66px; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; text-transform: uppercase; } #headermenu li a:hover { background: url("http://design.elif-shop.kz/menu_left_h.jpg") no-repeat scroll left center rgba(0, 0, 0, 0); display: block; float: left; height: 66px; } #headermenu li a:hover span { background: url("http://design.elif-shop.kz/menu_right_h.jpg") no-repeat scroll right center rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 66px; }замените на:
#headermenu li a { background: url("http://design.elif-shop.kz/menu_left.jpg") no-repeat scroll left top rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; font-size: 11px; font-weight: bold; height: 45px; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; text-transform: uppercase; } #headermenu li a:hover { background: url("http://design.elif-shop.kz/menu_left_h.jpg") no-repeat scroll left top rgba(0, 0, 0, 0); display: block; float: left; height: 45px; } #headermenu li a:hover span { background: url("http://design.elif-shop.kz/menu_right_h.jpg") no-repeat scroll right top rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 45px; }далее
#headermenu { height: 20px; padding: 10px; width: 100%; }замените на:
#headermenu { height: 45px; padding: 10px; width: 100%; }
#236
Отправлено 31 Январь 2014 - 09:03
#headermenu li a span { background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right center rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 66px; line-height: 43px; padding: 0 14px 0 6px; }А вот этих кодов в том же порядке как вы привели у меня нет
#headermenu li a { background: url("http://design.elif-shop.kz/menu_left.jpg") no-repeat scroll left top rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; font-size: 11px; font-weight: bold; height: 45px; line-height: 43px; padding: 0 0 0 7px; text-decoration: none; text-transform: uppercase; } #headermenu li a:hover { background: url("http://design.elif-shop.kz/menu_left_h.jpg") no-repeat scroll left top rgba(0, 0, 0, 0); display: block; float: left; height: 45px; } #headermenu li a:hover span { background: url("http://design.elif-shop.kz/menu_right_h.jpg") no-repeat scroll right top rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 45px; }
#headermenu { height: 20px; padding: 10px; width: 100%; }На данный момент код этого меню выглядит так:
#headermenu{ width:100%; } #headermenu ul{ list-style:none; } #headermenu li{ list-style:none; display:block; float:left; } #headermenu li a{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a span { background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right top rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; height: 45px; line-height: 43px; padding: 0 14px 0 6px; } #headermenu li a:hover{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; height:66px; } #headermenu li a:hover span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; color:#fff; height:66px; } #headermenu li a.current{ display:block; float:left; height:66px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left; line-height:43px; padding:0 0 0 7px; text-decoration:none; } #headermenu li a.current span{ display:block; float:left; background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right; height:66px; color:#fff; line-height:43px; padding:0 14px 0 6px; }
#237
Отправлено 31 Январь 2014 - 10:10
#headermenu { width: 100%; }и замените на -
#headermenu { width: 100%; height: 66px; }
далее найдите код -
#headermenu ul{ list-style:none; }и замените на -
#headermenu ul{ list-style:none; text-align: center; }Затем найдите код -
#headermenu li{ list-style:none; display:block; float:left; }и замените на -
#headermenu li{ list-style:none; display:inline-block; *display:inline; zoom:1; }
В самый конец style.css добавьте -
#headermenu li:first-child, li.first-child { margin: 0; /* убираем отступ у первого элемента, чтобы было дейсвительно по середине */ } * html #headermenu li { z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */ runtimeStyle.zIndex = 1, this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */ ) } #headermenu li a,#headermenu li a span, #headermenu li a:hover, #headermenu li a:hover span, #headermenu li a.current, #headermenu li a.current span{ float:none; display:inline-block; *display:inline; zoom:1; }Результат на скриншоте -
#238
Отправлено 02 Февраль 2014 - 20:33
miyako (31 Январь 2014 - 10:10) писал:
#headermenu { width: 100%; }и замените на -
#headermenu { width: 100%; height: 66px; }
далее найдите код -
#headermenu ul{ list-style:none; }и замените на -
#headermenu ul{ list-style:none; text-align: center; }Затем найдите код -
#headermenu li{ list-style:none; display:block; float:left; }и замените на -
#headermenu li{ list-style:none; display:inline-block; *display:inline; zoom:1; }
В самый конец style.css добавьте -
#headermenu li:first-child, li.first-child { margin: 0; /* убираем отступ у первого элемента, чтобы было дейсвительно по середине */ } * html #headermenu li { z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */ runtimeStyle.zIndex = 1, this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */ ) } #headermenu li a,#headermenu li a span, #headermenu li a:hover, #headermenu li a:hover span, #headermenu li a.current, #headermenu li a.current span{ float:none; display:inline-block; *display:inline; zoom:1; }Результат на скриншоте -
1)немного отцентрировать меню, а то слева отступ, а справа оно выезжает так, что появился горизонтальный бегунок прокрутки страницы
2) убрать отражающиеся блоки
#239
Отправлено 03 Февраль 2014 - 10:57
2. у вас это из того что в стиле загружается такое изображение(menu_right_h.jpg), с отражением, вам нужно сохранить его к себе на компьютер, удалить ту часть, которая является отражением и загрузить обратно.
Ту же процедуру проделать с файлом menu_right.jpg
#240
Отправлено 03 Февраль 2014 - 12:49
empty9228 (03 Февраль 2014 - 10:57) писал:
2. у вас это из того что в стиле загружается такое изображение(menu_right_h.jpg), с отражением, вам нужно сохранить его к себе на компьютер, удалить ту часть, которая является отражением и загрузить обратно.
Ту же процедуру проделать с файлом menu_right.jpg
1. В файле style.css замените
#headermenu { width: 100%; height: 66px; }на
#headermenu { height: 66px; }
#headermenu { width: 100%; height: 20px; padding: 10px; }на
#headermenu { height: 20px; padding: 10px; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных