Панель меню CSS с выпадающим списком

Question

Работа с панелью меню, которая имеет счетчик активных классов css. Мне нужно, чтобы строка меню была центрирована, а раскрывающийся список находился под правильным списком. Я могу получить тот или иной, но не оба, чтобы работать одновременно. Строка меню изменяет размеры, поэтому статический запас, оставшийся на нем, не будет работать. Это то, что должно выглядеть панель меню, но она не сосредоточена.

И вот что происходит, когда я удаляю поплавок: слева от #mainmenu ul li {}. Теперь оно сосредоточено, но элементы, принадлежащие имени пользователя, смещены влево.

Почему это происходит? и как мне обойти это?

HTML:

<div id="mainmenu"> 
    <?php 
    if(Yii::app()->user->name) 
    $display_name = Yii::app()->user->name; 
    if(strlen($display_name) > 11){ 
     $display_name = substr($display_name,0,9); 
     $display_name =$display_name.'...'; 
    } 
    ?> 
    <?php $this->widget('zii.widgets.CMenu',array(
     'items'=>array(
      array('label'=>'Home', 'url'=>array('/site/index')), 
      array('label'=>'My Tickets', 'url'=>array('/ticket/mytickets'), 'visible'=>!Yii::app()->user->isGuest), 
      array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')), 
      array('label'=>'Contact', 'url'=>array('/site/contact')), 
      array('label'=>'Schools', 'url'=>array('/school'), 'visible'=>Yii::app()->user->id == 'admin'), 
      array('label'=>'Teams', 'url'=>array('/team'), 'visible'=>Yii::app()->user->id == 'admin'), 
      array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest), 
      array('label'=>'Games', 'url'=>array('/game'), 'visible'=>Yii::app()->user->id == 'admin'), 
      array('label'=>'Users', 'url'=>array('/user'), 'visible'=>Yii::app()->user->id == 'admin'), 
      array('label'=>'Tickets', 'url'=>array('/ticket'), 'visible'=>Yii::app()->user->id == 'admin'), 
      array('label'=>'Team Placement', 'url'=>array('/tournamentresults'), 'visible'=>Yii::app()->user->id == 'admin'), 
      array('label'=>$display_name, 'url'=>array('#'), 'visible'=>!Yii::app()->user->isGuest, 
        'items' => array(
       array('label'=>'Edit User', 'url'=>array('/company/index')), 
       array('label'=>'Log-out', 'url'=>array('/site/logout')) 
    ), 


      ), 
     ), 
    )); ?> 
</div><!-- mainmenu --> 

Сгенерированный HTML код:

<div id="mainmenu"> 
    <ul id="yw0"> 
    <li class="active"><a href="/index.php/site/index">Home</a></li> 
    <li><a href="/index.php/ticket/mytickets">My Tickets</a></li> 
    <li><a href="/index.php/site/page?view=about">About</a></li> 
    <li><a href="/index.php/site/contact">Contact</a></li> 
    <li><a href="/index.php/site/#">SirRahal</a> 
     <ul> 
      <li><a href="/index.php/company/index">Edit User</a></li> 
      <li><a href="/index.php/site/logout">Log-out</a></li> 
     </ul> 
    </li> 
    </ul>  
</div> 

CSS код:

#mainmenu 
{ 
height:33px; 
margin: auto; 
text-align:center; 
} 

#mainmenu ul li 
{ 
display: inline; 
float: left; 
margin: auto; 
} 

#mainmenu ul li a 
{ 
color: #fbf3e1; 
font-size:14px; 
padding-top:5px; 
padding-bottom:5px; 
width:217px; 
background: #33332c; 
} 

#mainmenu ul li ul { 
display: none; 
position: absolute; 
margin-left: -20px; 
} 

#mainmenu ul li:hover > ul { 
display: block; 
} 

#mainmenu ul li a:hover, #mainmenu ul li.active a 
{ 
color: #f5921e; 
border-bottom: solid 5px #f5921e; 
text-decoration:none; 
border-bottom-right-radius: 5px; 
border-bottom-left-radius: 5px; 
} 

Answer 1

Заменить CSS, как это, используя ваши LI элементы для укладки, а не ваш A элементы:

body { 
    width:100%; 
} 
#mainmenu { 
    display: block; 
    width:100%; 
} 
#mainmenu ul { 
    width:100%; 
} 
#mainmenu ul li { 
    display: inline-block; 
    position:relative; 
    margin: auto; 
    width:19%; 
    background: #33332c; 
    padding-top:5px; 
    padding-bottom:5px; 
} 
#mainmenu ul li a { 
    color: #fbf3e1; 
    font-size:14px; 
} 
#mainmenu ul li ul { 
    display: none; 
    position: absolute; 
} 
#mainmenu ul li:hover > ul { 
    display: block; 
    width:auto; 
    position:absolute; 
    top:30px; 
    left:0; 
    background: #33332c; 
    padding:10px; 
} 
#mainmenu ul li:hover > ul li { 
    display: block; 
    width:150px; 
    height:auto; 
} 
#mainmenu ul li a:hover, #mainmenu ul li.active a { 
    color: #f5921e; 
    border-bottom: solid 5px #f5921e; 
    text-decoration:none; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

Вам может потребоваться некоторые дополнительные настройки, но у вас есть основы

See fiddle here

Answer 2

Самый большой ключ, на мой взгляд, на строительство/всплывающее меню CSS выпадающее использует absolute positioned элементы внутри relative positioned элементы и где их использовать. Еще важнее понять, как эти две схемы позиционирования относятся друг к другу. Как только вы это сделаете, вы можете создать все виды выпадающих меню/выпадающих меню.

Вам необходимо установить position: relative во все ваше меню li, есть ли они подменю или нет. Это не повлияет на их положение, если вы не начнете использовать свойства CSS top, right, bottom, left.

.menu li { 
    position: relative; 
} 

Теперь вы хотите, чтобы установить позицию всех ul, что дитя в li в меню на position: absolute. Мы также не хотим, чтобы они показывали сразу, поэтому скройте их с помощью display: none.

.menu li > ul { 
    display: none; 
    position: absolute; 
} 

Применение положения относительно содержащего элемента элемента с абсолютным расположением помогает содержать элемент с абсолютным расположением. Не только это, но и абсолютный позиционированный элемент будет основываться на его позиционировании относительно относительного позиционного родительского элемента, который мы хотим. Установка top: 0 и left: 0 вызовет ul, который является дочерним по отношению к li, чтобы начать в том же верхнем левом положении, что и его родительские элементы в верхнем левом углу.

Два правила, которые я представил до сих пор, являются основными строительными блоками выпадающего меню в CSS.

С этого момента все зависит от ваших целей дизайна относительно того, что еще нужно добавить в ваш CSS.

Я собираюсь (в основном) использовать общий код до конца в надежде, что вы сами и другие можете опираться на основные принципы, чтобы получить свои собственные конкретные результаты. Тем не менее, я оставлю код остальной части того, что вы поставили. Некоторые поверхностные стили, такие как границы, будут проигнорированы, вы можете добавить это позже.

HTML

Вот HTML я собираюсь использовать. При необходимости добавьте элементы привязки.

<ul class="menu"> 
    <li>One</li> 
    <li>Two 
     <ul> 
      <li>Sub Two A</li> 
      <li>Sub Two B</li> 
     </ul> 
    </li> 
    <li>Three</li> 
</ul> 

• Ваше меню верхнего уровня инлайн, так что давайте использовать float: left, чтобы сделать это.
• Они также фиксированной ширины. Вы делаете это с помощью своих якорных тегов <a>, что хорошо, я собираюсь использовать li.
• Ваш текст по центру.

.menu li { 
    float: left; 
    position: relative; 
    text-align: center; 
    width: 100px; 
} 

** СМ РЕД НИЖЕ ДЛЯ ПЕРЕМЕННОГО LI ОТВЕТА **

Поскольку вы используете равноширокие навигационные элементы, которые вы можете центрирования навигации с margin: 0 auto. Использование auto для поля слева и справа для центрирования элемента требует установки ширины! Просто добавьте полную ширину верхнего уровня li, и у вас будет своя ширина, необходимая для центра навигации. Не забудьте включить в расчёт ширины пробелы, маржу, границу и т. Д.

В моем примере используются три li по адресу 100px ширина.

.menu { 
    width: 300px; /* width of the 3 li */ 
    margin: 0 auto; /* centers ul when width is specified */ 
} 

Теперь мы будем позиционировать подменю ul.

• Для top нужно нажать подменю ul вниз по высоте, содержащей li. Я собираюсь предположить, что 25 пикселей - это высота li.
• Для left вы хотите, чтобы начать в тех же краях, как содержащий li так использовать 0.

.menu li > ul { 
    display: none; 
    left: 0; 
    position: absolute; 
    top: 25px; 
} 

Теперь давайте отобразить подменю ul, когда родитель li наведен.

.menu li:hover > ul { 
    display: block; 
} 

CSS

Окончательный CSS.

.menu { 
    width: 300px; /* width of the 3 li */ 
    margin: 0 auto; /* centers ul when width is specified */ 
} 
.menu li { 
    float: left; 
    line-height: 25px; /* assumed height of li */ 
    position: relative; 
    text-align: center; 
    width: 100px; 
} 
.menu li > ul { 
    display: none; 
    left: 0; 
    position: absolute; 
    top: 25px; 
} 
.menu li:hover > ul { 
    display: block; 
} 

Вот jsFiddle с некоторым основным стилем, который охватывает все вместе.

Там вы идете! Праймер для выпадающего меню/выпадающего меню CSS. Как обычно, ваши потребности потребуют некоторых изменений или дополнений к тому, что я поставил. Если вы поймете основные принципы, вы пройдете долгий путь в разработке более глубоких и надежных решений.

** EDIT **

Просто заметил, у вас есть переменное число li в вашей навигации. Внесите необходимые изменения. Это сочетание относительного позиционирования с процентными позициями.

.menu { 
    float: left; 
    position: relative; 
    left: 50%; 
} 
.menu li { 
    float: left; 
    line-height: 25px; /* assumed height of li */ 
    position: relative; 
    right: 50%; 
    text-align: center; 
    width: 100px; 
} 
/* undo the right positioning for submenu li so it aligns properly */ 
.menu li > ul li { 
    right: auto; 
} 

Последнее обновление: jsFiddle.