Меню В Картинках
#1
Отправлено 18 Май 2014 - 14:08
#2
Отправлено 18 Май 2014 - 21:59
luzikov (18 Май 2014 - 14:08) писал:
#3
Отправлено 18 Май 2014 - 22:43
Прикрепленные файлы
#4
Отправлено 19 Май 2014 - 15:21
#5
Отправлено 19 Май 2014 - 19:46
support 2.0 (18 Май 2014 - 21:59) писал:
#8
Отправлено 20 Май 2014 - 02:05
#header .links ul { left: 150px; list-style: none outside none; margin: 0; padding: 0; }пропишите:
#header .links ul ul { left: 0; }
картинки меню, а точнее родительским категориям можно задать, для этого необходимо добавить отступы:
#header .links a { display: block; float: left; font-size: 14px; padding: 10px 10px 9px; text-decoration: none; }
и ниже по отдельности простилизовать пункт меню, задав каждому свой background, для этого вам поможет следующее http://htmlbook.ru/css/nth-child
#9
Отправлено 20 Май 2014 - 11:12
Vaccina (20 Май 2014 - 02:05) писал:
#header .links ul { left: 150px; list-style: none outside none; margin: 0; padding: 0; }пропишите:
#header .links ul ul { left: 0; }
картинки меню, а точнее родительским категориям можно задать, для этого необходимо добавить отступы:
#header .links a { display: block; float: left; font-size: 14px; padding: 10px 10px 9px; text-decoration: none; }
и ниже по отдельности простилизовать пункт меню, задав каждому свой background, для этого вам поможет следующее http://htmlbook.ru/css/nth-child
И я сделал как вы сказали, однако подпункты теперь все появляются в одном месте, слева с краю
#10
Отправлено 20 Май 2014 - 15:33
ul.mainmenu{ margin:0; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1020px; } ul.mainmenu a{ text-decoration:none; outline:none; } ul.mainmenu li{ float:left; width:170px; height:85px; position:relative; cursor:pointer; } ul.mainmenu li > a{ position:absolute; top:0px; left:0px; width:170px; height:85px; z-index:12; background:transparent url(../images/overlay.png) no-repeat bottom right; -moz-box-shadow:0px 0px 2px #000 inset; -webkit-box-shadow:0px 0px 2px #000 inset; box-shadow:0px 0px 2px #000 inset; } ul.mainmenu li a img{ border:none; position:absolute; width:0px; height:0px; bottom:0px; left:85px; z-index:100; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; } ul.mainmenu li span.mainmenu_wrap{ position:absolute; top:25px; left:0px; width:170px; height:60px; z-index:15; } ul.mainmenu li span.mainmenu_active{ position:absolute; background:#111; top:85px; width:170px; height:0px; left:0px; z-index:14; -moz-box-shadow:0px 0px 4px #000 inset; -webkit-box-shadow:0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset; } ul.mainmenu li span span.mainmenu_link, ul.mainmenu li span span.sdt_descr, ul.mainmenu li div.sdt_box a{ margin-left:15px; text-transform:uppercase; text-shadow:1px 1px 1px #000; } ul.mainmenu li span span.mainmenu_link{ color:#fff; font-size:24px; float:left; clear:both; } ul.mainmenu li span span.mainmenu_descr{ color:#0B75AF; float:left; clear:both; width:155px; /*For dumbass IE7*/ font-size:10px; letter-spacing:1px; } ul.mainmenu li div.mainmenu_box{ display:block; position:absolute; width:170px; overflow:hidden; height:170px; top:85px; left:0px; display:none; background:#000; } ul.mainmenu li div.mainmenu_box a{ float:left; clear:both; line-height:30px; color:#0B75AF; } ul.mainmenu li div.mainmenu_box a:first-child{ margin-top:15px; } ul.mainmenu li div.mainmenu_box a:hover{ color:#fff; }, верно?
#11
Отправлено 21 Май 2014 - 02:10
На счет меню, не обязательно именно устанавливать другое, достаточно простилизовать имеющееся.
Перечитываем внимательно, дабы понимать, что не магия =) http://htmlbook.ru/css/nth-child
После:
#header .links a { display: block; float: left; font-size: 14px; height: 70px; padding: 10px 10px 9px; text-decoration: none; width: 130px; }пишем:
#mainmenu li > a { color: #FFFFFF; display: inline-block !important; height: 30px !important; padding-top: 70px !important; text-align: center; } #mainmenu li > a:nth-child(1) { background: url('ссылка на картинку на первой категории') no-repeat center top; } #mainmenu li > a:nth-child(2) { background: url('ссылка на картинку на второй категории') no-repeat center top; }
#mainmenu li > a:nth-child(2) и т.д. по аналогии делаем.
Картинки пробуйте загружать размерами 40х40px
#12
Отправлено 21 Май 2014 - 10:25
Vaccina (21 Май 2014 - 02:10) писал:
На счет меню, не обязательно именно устанавливать другое, достаточно простилизовать имеющееся.
Перечитываем внимательно, дабы понимать, что не магия =) http://htmlbook.ru/css/nth-child
После:
#header .links a { display: block; float: left; font-size: 14px; height: 70px; padding: 10px 10px 9px; text-decoration: none; width: 130px; }пишем:
#mainmenu li > a { color: #FFFFFF; display: inline-block !important; height: 30px !important; padding-top: 70px !important; text-align: center; } #mainmenu li > a:nth-child(1) { background: url('ссылка на картинку на первой категории') no-repeat center top; } #mainmenu li > a:nth-child(2) { background: url('ссылка на картинку на второй категории') no-repeat center top; }
#mainmenu li > a:nth-child(2) и т.д. по аналогии делаем.
Картинки пробуйте загружать размерами 40х40px
#13
Отправлено 21 Май 2014 - 11:12
Тут вот описание работы, но я не понимаю как бы его подстроить под себя. где менять переменную, что бы найстройки стилей относились к моему меню, и что делать с jquery? Я его загружаю, но он не работает
#14
Отправлено 21 Май 2014 - 12:35
#15
Отправлено 21 Май 2014 - 17:39
#16
Отправлено 22 Май 2014 - 02:49
С jquery, необходимо после загрузки файла: jquery.easing.1.3.js еще подключить его в шаблоне HTML как подключен файл main.js, стили все вставляем в css файл, js в конец main.js, сама структура будет находиться в HTML
Пробуйте пока ставить как в демо, со всеми пунктами и картинками, необходимо для начала, чтобы заработало, а потом вы на свое усмотрение поменяете пункты и прочее.
#17
Отправлено 22 Май 2014 - 08:13
Vaccina (22 Май 2014 - 02:49) писал:
С jquery, необходимо после загрузки файла: jquery.easing.1.3.js еще подключить его в шаблоне HTML как подключен файл main.js, стили все вставляем в css файл, js в конец main.js, сама структура будет находиться в HTML
Пробуйте пока ставить как в демо, со всеми пунктами и картинками, необходимо для начала, чтобы заработало, а потом вы на свое усмотрение поменяете пункты и прочее.
#18
Отправлено 22 Май 2014 - 11:08
#19
Отправлено 23 Май 2014 - 01:53
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных