Перейти к содержимому


Меню В Картинках


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 18

#1 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 18 Май 2014 - 14:08

Помогите сделать такое меню как на скрине, также прилагаю код html и css. Аккаунт sl-292860

Прикрепленные изображения

  • ми.png

Прикрепленные файлы

  • Прикрепленный файл  html.txt   551,1К   385 Количество загрузок:
  • Прикрепленный файл  header_stil.txt   514,43К   593 Количество загрузок:


#2 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 18 Май 2014 - 21:59

Просмотр сообщенияluzikov (18 Май 2014 - 14:08) писал:

Помогите сделать такое меню как на скрине, также прилагаю код html и css. Аккаунт sl-292860
Здравствуйте, взять это меню с того сайта нельзя. Данные изображения и код принадлежит тому ресурсу. Также код весьма громоздкий. Могу Вам предложить только сделать что-то похожее (файлы меню). Естественно изображения можно также сделать черно-белыми, а при наведении они меняются на цветные. Также уточните на счет выпадающего меню: Вам оно тоже нужно.

#3 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 18 Май 2014 - 22:43

хорошо, а вот такое меню можно сделать? http://tympanus.net/...ideDownBoxMenu/ прилагаю код данного меню.

Прикрепленные файлы



#4 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 19 Май 2014 - 15:21

Помогите пожалуйста

#5 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 19 Май 2014 - 19:46

Просмотр сообщенияsupport 2.0 (18 Май 2014 - 21:59) писал:

Здравствуйте, взять это меню с того сайта нельзя. Данные изображения и код принадлежит тому ресурсу. Также код весьма громоздкий. Могу Вам предложить только сделать что-то похожее (файлы меню). Естественно изображения можно также сделать черно-белыми, а при наведении они меняются на цветные. Также уточните на счет выпадающего меню: Вам оно тоже нужно.
да, выпадающее тоже нужно, я вроде сделал его, но выпадающие разделы сдвинуты в сторону,как бы это изменить?

#6 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 19 Май 2014 - 19:54

Просмотр сообщенияluzikov (19 Май 2014 - 19:46) писал:

да, выпадающее тоже нужно, я вроде сделал его, но выпадающие разделы сдвинуты в сторону,как бы это изменить?
Уточните, пожалуйста, как и куда нужно сдвинуть подкатегории.

#7 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 19 Май 2014 - 19:57

Просмотр сообщенияDars (19 Май 2014 - 19:54) писал:

Уточните, пожалуйста, как и куда нужно сдвинуть подкатегории.
Каждая подкатегория должна выпадать под своей родительской кнопкой. А они выпадают где то в стороне. И на счет меню, если вам не очень трудно, подскажите как его реализовать

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Май 2014 - 02:05

В main.css после:
#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 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 20 Май 2014 - 11:12

Просмотр сообщенияVaccina (20 Май 2014 - 02:05) писал:

В main.css после:
#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 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 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 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 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
Посмотрите что получилось, плюс я хотел бы анимированное меню, и сами кнопки не должны быть с фоновым изображением. Должно быть как тут http://tympanus.net/...ideDownBoxMenu/

#13 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 21 Май 2014 - 11:12

http://tympanus.net/...-down-box-menu/
Тут вот описание работы, но я не понимаю как бы его подстроить под себя. где менять переменную, что бы найстройки стилей относились к моему меню,  и что делать с jquery? Я его загружаю, но он не работает

#14 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 21 Май 2014 - 12:35

help

#15 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 21 Май 2014 - 17:39

я не теряю надежды!!!!!

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Май 2014 - 02:49

по данной ссылке имеется подробная инструкция, проблема лишь в том, что идет вложенное меню и картинки все разные, а это означает, что про переменные мы забываем и делаем все вручную, добавление каждого пункта и присвоения ему картинки.
С jquery, необходимо после загрузки файла: jquery.easing.1.3.js еще подключить его в шаблоне HTML как подключен файл main.js, стили все вставляем в css файл, js в конец main.js, сама структура будет находиться в HTML

Пробуйте пока ставить как в демо, со всеми пунктами и картинками, необходимо для начала, чтобы заработало, а потом вы на свое усмотрение поменяете пункты и прочее.

#17 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 22 Май 2014 - 08:13

Просмотр сообщенияVaccina (22 Май 2014 - 02:49) писал:

по данной ссылке имеется подробная инструкция, проблема лишь в том, что идет вложенное меню и картинки все разные, а это означает, что про переменные мы забываем и делаем все вручную, добавление каждого пункта и присвоения ему картинки.
С jquery, необходимо после загрузки файла: jquery.easing.1.3.js еще подключить его в шаблоне HTML как подключен файл main.js, стили все вставляем в css файл, js в конец main.js, сама структура будет находиться в HTML

Пробуйте пока ставить как в демо, со всеми пунктами и картинками, необходимо для начала, чтобы заработало, а потом вы на свое усмотрение поменяете пункты и прочее.
Я пробовал, Выглядит как в демо версии, вставляю в конец main.js выдает 5 ошибок на сайте и анимация так и не работает

#18 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 22 Май 2014 - 11:08

исправил, скажите кк сделать так что бы в выпадающем меню были видны все подкатегории, а не только 2?

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 23 Май 2014 - 01:53

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




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных