CSS菜单栏以下拉列表为中心

时间：2014-09-29 18:03:27

标签： css yii cmenu

使用具有计数器活动css类的菜单栏。我需要菜单栏居中，下拉菜单位于正确的列表项下。我可以得到一个或另一个但不能同时工作。菜单栏会更改大小，因此在其上放置静态边距将不起作用。菜单栏应该是这样的，但它不是居中的。 enter image description here

当我从#mainmenu ul li {}移除浮动时，会发生这种情况。它现在居中，但属于用户名的项目都向左移动。

enter image description here

为什么会这样？我该如何解决这个问题？

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;
}

2 个答案:

答案 0 :(得分：1)

在我看来，构建CSS下拉菜单/弹出菜单的最大关键是在absolute positioned元素中使用relative positioned元素以及在何处使用它们。更重要的是要了解这两种定位方案如何相互关联。完成后，您可以构建各种下拉/弹出菜单。

您需要将position: relative设置为您的所有菜单li，无论它们是否包含子菜单。除非您开始使用top, right, bottom, left CSS属性，否则这样做不会影响其位置。

.menu li {
     position: relative;
}

现在，您需要将菜单中ul的孩子的所有li的位置设置为position: absolute。我们也不希望他们立即展示，因此请将其隐藏display: none。

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

相对于绝对定位元素的包含元素应用位置有助于包含绝对定位元素。不仅如此，绝对定位元素将基于相对定位的父元素定位，这正是我们想要的。设置top: 0和left: 0会导致ul的{​​{1}}孩子在同一个左上角的位置开始，因为它的左上角是父元素手角。

到目前为止，我提供的两条规则是CSS中下拉/弹出菜单的基本构建块。

从现在开始，这将完全取决于您的设计目标，以及您需要添加到CSS中的其他内容。

我（大部分）会在剩下的时间里使用通用代码，希望自己和他人可以建立基本原则来获得自己的特定结果。这就是说我将基于你提供的代码来完成剩下的代码。一些表面样式如边框将被忽略，您可以稍后添加。

<强> HTML

以下是我要使用的HTML。根据需要添加锚元素。

li
  • 您的顶级菜单是内联的，因此我们可以使用<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

**请参阅以下版本的LI ANSWER **

由于您使用的是固定宽度导航元素，因此您可以使用.menu li { float: left; position: relative; text-align: center; width: 100px; } 将导航置于中心位置。 使用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的高度。我假设25px是li的高度。
  • 对于li，您希望它与包含left的边缘相同，因此请使用0。
li

现在，当父.menu li > ul { display: none; left: 0; position: absolute; top: 25px; } 悬停时，让我们显示子菜单ul。

li

<强> CSS

最终的CSS。

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

这是一个jsFiddle，其中包含一些基本样式，将它们整合在一起。

你去吧！ 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; } 变量号为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。

答案 1 :(得分：0)

使用LI元素替换你的A元素，将这样的CSS替换为这样：

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

相关问题
最新问题