• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Зафиксировать горизонтальное меню
Зафиксировать горизонтальное меню
Osferon
Сообщений: 161
Репутация: 32

Сообщение # 1 | 12:55:54
Здравствуйте! Наконец мне удалось сделать горизонтальное мега меню на всю ширину сайта, которое поддерживает конструктор. Но возникла проблема для решения которой не хватает моих ограниченных знаний 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>
Татуированый
Сообщений: 545
Репутация: 115

Сообщение # 2 | 15:58:02
Osferon, в стиле
Код
.menu ul
замени значение
Код
left: 0px;
на
Код
left: -465px;
Если ты этого хотел...
Хотя нет, так не выйдет. Тогда сдвигаются все выпадающие меню. Может именно этому выпадающему списку задать другой класс или дополнительный. И прописать ему этот стиль.

Сообщение отредактировал Татуированый - Вторник, 11 Мар 2014, 15:59:36
Osferon
Сообщений: 161
Репутация: 32

Сообщение # 3 | 22:28:37
Цитата Татуированый ()
Может именно этому выпадающему списку задать другой класс или дополнительный. И прописать ему этот стиль.

Как это сделать? Все выпадающие списки это 1 меню которое формирует код $SMENU_1$. Можно сделать несколько отдельных меню $SMENU_2$, $SMENU_3$ и для каждого прописать свои стили. Но вот эти классы .menu, .submenu, которые формируют списки меню прописаны, как то через js файл в коде они нигде не указаны.
Татуированый
Сообщений: 545
Репутация: 115

Сообщение # 4 | 23:21:41
Osferon, это и есть минусы стандарта. С созданием меню я особо не дружу.
Но если взять за основу как в div верстке собственного меню. Я бы сделал каждый блок меню, родительным. (для видео, главной, блога, онлайн игр и т.д.)
{position:relative;}
Чтобы каждый выпадающий список отталкивался от своего блока. И уже тогда прилепить каждому выпадающему меню свой класс, просто через пробел.
class="menu glavnaja"
class="menu blog"
class="menu video"

И потом, каждый этот класс, позиционировать, относительно своего родительного дива...
{position:absolute; left:-450px; top:0px;}

Вроде как-то так... (если я с фантазией не переборщил) happy
Стандарт всегда ограничен...

Osferon
Сообщений: 161
Репутация: 32

Сообщение # 5 | 01:21:27
Цитата Татуированый ()
class="menu glavnaja"
class="menu blog"
class="menu video"

А как эти классы прилепить к вот этому коду $SMENU_1$? Так <div class="menu glavnaja">$SMENU_1$</div> не работает. Гляжу, что скорей всего не получится так, как я хотел. Надо либо от конструктора меню отказываться, либо как то по другому делать.
Татуированый
Сообщений: 545
Репутация: 115

Сообщение # 6 | 01:27:54
Цитата Osferon ()
Надо либо от конструктора меню отказываться, либо как то по другому делать.
Третьего не дано.
Ты спокойно можешь скачать точно такое же горизонтальное меню по функционалу, и просто задать ему стили того, что у тебя сейчас.
Так будет проще...

Osferon
Сообщений: 161
Репутация: 32

Сообщение # 7 | 04:22:24
Что то в этом роде я намутил http://ebaypc.at.ua/video
Татуированый
Сообщений: 545
Репутация: 115

Сообщение # 8 | 14:52:53
Osferon, хорошее меню. Когда-то давно было на одном из моих сайтов.
Вид подредактируешь под себя и не будет никаких проблем с стандартными ограничениями.

Stan4769
Сообщений: 17
Репутация: 6

Сообщение # 9 | 00:22:59
Я извиняюсь, может кто нибудь знает а как убрать выпадающее меню.
Имя сайта - http://school-71.zp.ua. Не хотелось бы чтобы при наведении на Кадры, Док. Гимназии и Информация вываливалось меню в котором надписи не полноценны.
Еще раз дико извиняюсь если не по теме.
exzon0N
Сообщений: 29
Репутация: 2

Сообщение # 10 | 16:18:57
Stan4769, Панель управления - Конструктор меню - уберите ненужные Вам подменю.
Osferon
Сообщений: 161
Репутация: 32

Сообщение # 11 | 11:43:03
На мой взгляд получилось не плохо, http://ebaypc.at.ua/ но возникает следующая проблема: меню написано в шапке сайта и соответственно код каждой страницы будет начинаться с этого меню, что не очень хорошо с точки зрения ПС. Во многих Интернет-магазинах код верхнего меню находится в самом низу страницы. Дайте пожалуйста ссылку, где описано, как правильно это сделать. Как установить код верхнего меню в подвале, но, чтобы отображалось оно в шапке?
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Зафиксировать горизонтальное меню
  • Страница 1 из 1
  • 1
Поиск: