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


Изменение Верхнего Меню


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

#1 GreenBrick

GreenBrick

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений
  • ГородВоронеж

Отправлено 16 Март 2014 - 12:00

В общем вот та картина, которая сейчас:
Изначально с обводкой.jpg
Это что примерно необходимо:
Итог.jpg
В общем банально необходимо сделать меню отдельным блоком и растянуть по ширине этого блока. Плюс при этом сохранить каким-то образом его адаптивность.
Надеюсь на вашу помощь. Стилевое оформление сделаю сам, необходимо лишь позиционирование. Заранее спасибо.
Сайт-клиент: http://microfive.storeland.ru/

#2 GreenBrick

GreenBrick

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений
  • ГородВоронеж

Отправлено 16 Март 2014 - 13:43

Извиняюсь, просто ленился, сам сделал) Если кого интересует, подскажу)

#3 Den1922

Den1922

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

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

Отправлено 02 Апрель 2014 - 20:18

Подскажи пожалуйста как сделать такое меню и слайдер. Я вообще новичок, только поставил шаблон и пытаюсь его менять,  такая каша. По слайдеру вообще не понимаю как и что.

Подскажи пожалуйста как сделать такое меню и слайдер. Я вообще новичок, только поставил шаблон и пытаюсь его менять,  такая каша. По слайдеру вообще не понимаю как и что.

#4 MikDark

MikDark

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

  • Модераторы
  • 6 457 сообщений

Отправлено 02 Апрель 2014 - 20:22

Просмотр сообщенияDen1922 (02 Апрель 2014 - 20:18) писал:

Подскажи пожалуйста как сделать такое меню и слайдер. Я вообще новичок, только поставил шаблон и пытаюсь его менять,  такая каша. По слайдеру вообще не понимаю как и что.

Подскажи пожалуйста как сделать такое меню и слайдер. Я вообще новичок, только поставил шаблон и пытаюсь его менять,  такая каша. По слайдеру вообще не понимаю как и что.

А что именно Вы со слайдером хотите? он тут идет стандартный.

#5 Иванов

Иванов

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

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

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

Просмотр сообщенияGreenBrick (16 Март 2014 - 13:43) писал:

Извиняюсь, просто ленился, сам сделал) Если кого интересует, подскажу)

Подскажите пож-та как сделать такое же горизонтальное меню как у Вас?

Спасибо!

#6 Иванов

Иванов

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

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

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

Просмотр сообщенияMikDark (02 Апрель 2014 - 20:22) писал:

А что именно Вы со слайдером хотите? он тут идет стандартный.

Подскажите пож-та как сделать такое же горизонтальное меню?

Спасибо!

#7 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 01 Июнь 2014 - 09:47

Просмотр сообщенияИванов (31 Май 2014 - 21:48) писал:

Подскажите пож-та как сделать такое же горизонтальное меню?

Спасибо!
Здравствуйте, Вы хотите такое же горизонтальное меню как и на этом сайте , то Вам нужно найти в style.css
#megamenu{position:absolute;height:54px;top:90px;left:238px;} 
#megamenu li .root_link:hover,
#megamenu li.active .root_link {color:#da3b44}

#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:11px; text-decoration: none;}

заменить на
#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);} 

#megamenu li .root_link:hover,
#megamenu li.active .root_link {color: #fff;
background: #da3b44}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}


#8 Иванов

Иванов

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

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

Отправлено 01 Июнь 2014 - 14:58

Просмотр сообщенияИрина345 (01 Июнь 2014 - 09:47) писал:

Здравствуйте, Вы хотите такое же горизонтальное меню как и на этом сайте , то Вам нужно найти в style.css
#megamenu{position:absolute;height:54px;top:90px;left:238px;} 
#megamenu li .root_link:hover,
#megamenu li.active .root_link {color:#da3b44}

#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:11px; text-decoration: none;}

заменить на
#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);}

#megamenu li .root_link:hover,
#megamenu li.active .root_link {color: #fff;
background: #da3b44}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

Всё сделали, как Вы описали, но что-то не совсем так получилось (не так как на том сайте)....   посмотрите пож-та.

Спасибо!

#9 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 01 Июнь 2014 - 16:37

Просмотр сообщенияИванов (01 Июнь 2014 - 14:58) писал:

Всё сделали, как Вы описали, но что-то не совсем так получилось (не так как на том сайте)....   посмотрите пож-та.

Спасибо!
в style.ccs найдите
#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);} 
#megamenu li.root_menu{padding:25px 8px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}
замените




#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;} 


#megamenu li.root_menu{padding:15px 1px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 4px 17px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}


#10 Иванов

Иванов

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

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

Отправлено 01 Июнь 2014 - 16:43

Просмотр сообщенияИрина345 (01 Июнь 2014 - 16:37) писал:

в style.ccs найдите
#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);}
#megamenu li.root_menu{padding:25px 8px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}
замените




#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;}


#megamenu li.root_menu{padding:15px 1px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 4px 17px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

А как теперь отодвинуть строчку меню от верхней шапки чуть вниз? чтобы строчка меню была между верхней шапкой и слайдом.

#11 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 01 Июнь 2014 - 16:53

Просмотр сообщенияИванов (01 Июнь 2014 - 16:43) писал:

А как теперь отодвинуть строчку меню от верхней шапки чуть вниз? чтобы строчка меню была между верхней шапкой и слайдом.
найдите
#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;}


.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

замените на

.flexslider {margin: 54px 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}





#megamenu{position: absolute;
height: 43px;
top: 126px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
width: 861px;}



#12 Иванов

Иванов

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

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

Отправлено 01 Июнь 2014 - 17:03

Просмотр сообщенияИрина345 (01 Июнь 2014 - 16:53) писал:

найдите
#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;}


.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

замените на

.flexslider {margin: 54px 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}





#megamenu{position: absolute;
height: 43px;
top: 126px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
width: 861px;}


Теперь строка меню залазит на слайдер, а на других страницах залазит на правое меню и остальное...

#13 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 01 Июнь 2014 - 17:10

Просмотр сообщенияИванов (01 Июнь 2014 - 17:03) писал:

Теперь строка меню залазит на слайдер, а на других страницах залазит на правое меню и остальное...
Уточните на скриншоте куда Вам нужно поставить меню

#14 Иванов

Иванов

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

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

Отправлено 01 Июнь 2014 - 17:21

Просмотр сообщенияИрина345 (01 Июнь 2014 - 17:10) писал:

Уточните на скриншоте куда Вам нужно поставить меню

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

  • 1.jpg
  • 2.jpg


#15 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 01 Июнь 2014 - 17:36

Просмотр сообщенияИванов (01 Июнь 2014 - 17:21) писал:

найдите
#megamenu{position: absolute;
height: 43px;
top: 126px;
...}
.content.container{margin-top:25px;margin-bottom:50px;min-height:500px}
замените
#megamenu{position: absolute;
height: 43px;
top: 107px;
...}
.content.container{margin-top:59px;margin-bottom:50px;min-height:500px}


#16 Иванов

Иванов

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

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

Отправлено 01 Июнь 2014 - 17:42

Просмотр сообщенияИрина345 (01 Июнь 2014 - 17:36) писал:

найдите
#megamenu{position: absolute;
height: 43px;
top: 126px;
...}
.content.container{margin-top:25px;margin-bottom:50px;min-height:500px}
замените
#megamenu{position: absolute;
height: 43px;
top: 107px;
...}
.content.container{margin-top:59px;margin-bottom:50px;min-height:500px}

А черную полосу как убрать? (на скрине нарисовано)

#17 lew

lew

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

  • Модератоpы
  • 244 сообщений

Отправлено 01 Июнь 2014 - 21:09

вопрос актуален?
если да, то какую полосу убрать?

#18 Иванов

Иванов

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

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

Отправлено 01 Июнь 2014 - 21:16

Просмотр сообщенияЛев (01 Июнь 2014 - 21:09) писал:

вопрос актуален?
если да, то какую полосу убрать?

да, актуален. На скрине вверху обозначено.  (красный шрифтом.)  скрин с сообщения №14

#19 lew

lew

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

  • Модератоpы
  • 244 сообщений

Отправлено 01 Июнь 2014 - 22:14

В style.css
найдите код
#header-fluid{position:relative;background: #ffffff url('ПУТЬ_К_КАРТИНКЕ/header-top-bg.png') repeat-x 0 0;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}
и замените на этот

#header-fluid{position:relative;background: none repeat-x 0 0  #ffffff;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}





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

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