|
|
Модератор форума: Yuri_G |
Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами Зафиксировать горизонтальное меню |
Зафиксировать горизонтальное меню |
Здравствуйте! Наконец мне удалось сделать горизонтальное мега меню на всю ширину сайта, которое поддерживает конструктор. Но возникла проблема для решения которой не хватает моих ограниченных знаний CSS.
Проблема в том, что меню сдвигается в соответствии с выбранным пунктом верхнего уровня и на самом правом пункте половина меню находится за границами экрана. То есть левый край меню отображается по отношению к родительскому элементу, а надо, что бы левый край отображался в крайней левой позиции независимо от выбранного элемента. Помогите пожалуйста решить вопрос. Вот тут можно посмотреть http://ebaypc.at.ua/ для наглядности. Код меню CSS тут. Код #navi{height:44px;background:#FFFFFF;background:-moz-linear-gradient(top, #FFFFFF 0, #EFEFEF 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100%, #EFEFEF));background:-webkit-linear-gradient(top, #FFFFFF 0, #EFEFEF 100%);background:-o-linear-gradient(top, #FFFFFF 0, #EFEFEF 100%);background:-ms-linear-gradient(top, #FFFFFF 0, #EFEFEF 100%);background:linear-gradient(to bottom, #FFFFFF 0, #EFEFEF 100%);border-top:1px solid #F2F2F2;border-bottom:3px solid #CFCFCF;border-radius:4px;} #nav{float:left;padding-left:0px;} .level-item{background:#8d8d8d url('/img/menu-marker1.png') right no-repeat !important;} #nav ul li{float:left;list-style-type:none;} .menu li{float:left;width:200px;background:#353535;list-style-type:none;padding:0;margin:0;position:relative;} .menu ul{display:none;padding:0;margin:0;position:absolute;top:47px;left:0px;z-index:9999;} .menu ul li a{display:block;line-height:30px;padding:0 10px;border-bottom:1px solid #4B4B4B;text-decoration:none !important;color:#dfdfdf;} .submenu{left:200px;top:0px;width:1000px;position:relative;} .submenu ul{left:0px;top:30px;} #nav > ul > li, #nav > ul > li:hover{border:none;width:auto;background:none;} .menu > li > a, #nav ul.uMenuRoot li a{display:block;height:44px;line-height:44px;margin:0 5px;padding:0 5px;color:#7A7A7A;font-size:14px;border-bottom:3px solid #CFCFCF;text-decoration:none !important;-webkit-transition:color, border-color 0.3s ease;-moz-transition:color, border-color 0.3s ease;-o-transition:color, border-color 0.3s ease;transition:color, border-color 0.3s ease;} .menu{border-bottom-left-radius:4px;} Код НТМЛ тут Код <div id="navi"> <div id="nav"> <?if($SMENU_1$)?>$SMENU_1$<?endif?> </div> <?if($BASKET$)?> <div id="cart"> $BASKET$ </div> <?endif?> </div> |
Osferon, в стиле
Код .menu ul Код left: 0px; Код left: -465px; Хотя нет, так не выйдет. Тогда сдвигаются все выпадающие меню. Может именно этому выпадающему списку задать другой класс или дополнительный. И прописать ему этот стиль. Сообщение отредактировал Татуированый - Вторник, 11 Мар 2014, 15:59:36
|
Может именно этому выпадающему списку задать другой класс или дополнительный. И прописать ему этот стиль. Как это сделать? Все выпадающие списки это 1 меню которое формирует код $SMENU_1$. Можно сделать несколько отдельных меню $SMENU_2$, $SMENU_3$ и для каждого прописать свои стили. Но вот эти классы .menu, .submenu, которые формируют списки меню прописаны, как то через js файл в коде они нигде не указаны. |
Osferon, это и есть минусы стандарта. С созданием меню я особо не дружу.
Но если взять за основу как в div верстке собственного меню. Я бы сделал каждый блок меню, родительным. (для видео, главной, блога, онлайн игр и т.д.) {position:relative;} Чтобы каждый выпадающий список отталкивался от своего блока. И уже тогда прилепить каждому выпадающему меню свой класс, просто через пробел. class="menu glavnaja" class="menu blog" class="menu video" И потом, каждый этот класс, позиционировать, относительно своего родительного дива... {position:absolute; left:-450px; top:0px;} Вроде как-то так... (если я с фантазией не переборщил) Стандарт всегда ограничен... |
А как эти классы прилепить к вот этому коду $SMENU_1$? Так <div class="menu glavnaja">$SMENU_1$</div> не работает. Гляжу, что скорей всего не получится так, как я хотел. Надо либо от конструктора меню отказываться, либо как то по другому делать. |
|
Что то в этом роде я намутил http://ebaypc.at.ua/video
|
|
Я извиняюсь, может кто нибудь знает а как убрать выпадающее меню.
Имя сайта - http://school-71.zp.ua. Не хотелось бы чтобы при наведении на Кадры, Док. Гимназии и Информация вываливалось меню в котором надписи не полноценны. Еще раз дико извиняюсь если не по теме. |
На мой взгляд получилось не плохо, http://ebaypc.at.ua/ но возникает следующая проблема: меню написано в шапке сайта и соответственно код каждой страницы будет начинаться с этого меню, что не очень хорошо с точки зрения ПС. Во многих Интернет-магазинах код верхнего меню находится в самом низу страницы. Дайте пожалуйста ссылку, где описано, как правильно это сделать. Как установить код верхнего меню в подвале, но, чтобы отображалось оно в шапке?
|
| |||
| |||