Изменение Верхнего Меню
#1
Отправлено 16 Март 2014 - 12:00
Это что примерно необходимо:
В общем банально необходимо сделать меню отдельным блоком и растянуть по ширине этого блока. Плюс при этом сохранить каким-то образом его адаптивность.
Надеюсь на вашу помощь. Стилевое оформление сделаю сам, необходимо лишь позиционирование. Заранее спасибо.
Сайт-клиент: http://microfive.storeland.ru/
#2
Отправлено 16 Март 2014 - 13:43
#3
Отправлено 02 Апрель 2014 - 20:18
Подскажи пожалуйста как сделать такое меню и слайдер. Я вообще новичок, только поставил шаблон и пытаюсь его менять, такая каша. По слайдеру вообще не понимаю как и что.
#4
Отправлено 02 Апрель 2014 - 20:22
Den1922 (02 Апрель 2014 - 20:18) писал:
Подскажи пожалуйста как сделать такое меню и слайдер. Я вообще новичок, только поставил шаблон и пытаюсь его менять, такая каша. По слайдеру вообще не понимаю как и что.
А что именно Вы со слайдером хотите? он тут идет стандартный.
#7
Отправлено 01 Июнь 2014 - 09:47
Иванов (31 Май 2014 - 21:48) писал:
Спасибо!
#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
Отправлено 01 Июнь 2014 - 14:58
Ирина345 (01 Июнь 2014 - 09:47) писал:
#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
Отправлено 01 Июнь 2014 - 16:37
Иванов (01 Июнь 2014 - 14:58) писал:
Спасибо!
#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
Отправлено 01 Июнь 2014 - 16:43
Ирина345 (01 Июнь 2014 - 16:37) писал:
#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
Отправлено 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
Отправлено 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;}
Теперь строка меню залазит на слайдер, а на других страницах залазит на правое меню и остальное...
#15
Отправлено 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
Отправлено 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
Отправлено 01 Июнь 2014 - 21:09
если да, то какую полосу убрать?
#19
Отправлено 01 Июнь 2014 - 22:14
найдите код
#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 анонимных