Question

我整夜都在努力创造这个。我终于得到它将显示一个弹出窗口的地方，但所有的维度都是错误的，我显然不明白这里的CSS的层次结构。我的最终目标是看起来像这样。（垂直，配色方案，漂亮的图标）What I want it to look like.但我希望它像this.

一样

HTML ：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript">$(document).ready(function(){$(".menu").menu({speed: 400,type: "vertical",});});</script>    

<body>
<div class="content">
<ul class="menu">
    <li class="active"><a href="JavaScript:void(0)"><i class="icon-dashboard">     
</i>Dashboard</a></li>
    <li><a href="JavaScript:void(0)"><i class="icon-servers"></i>Servers</a>
        <ul>
        <li><a href="JavaScript:void(0)">View Virtual Servers</a></li>
        <li><a href="JavaScript:void(0)">Add Virtual Servers</a></li>
        </ul>
    </li>
    <li><a href="JavaScript:void(0)"><i class"icon-user"></i>Users</a></li>
</ul>
</div>
</body>

CSS ：

 @import "./font-awesome.css";
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro');
.menu {
    position: relative;
    float: left;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", Segoe UI, Arial;
    list-style: none;
    background: #303641;
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li {
    display: inline;
    position: relative
    float: left;
    height: 2.5em;
    line-height: 2.5em;
    width: 4em;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.menu>li>a {
    display: block;
    padding: 20px 22px;
    color: #aaabae;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-indent: -500em;
    border-bottom: 1px solid rgba(170, 171, 174, 0.15);
    -webkit-transition: color .2s linear, background .2s linear;
    -moz-transition: color .2s linear, background .2s linear;
    -o-transition: color .2s linear, background .2s linear;
    transition: color .2s linear, background .2s linear
}
.menu li:hover>a, .menu li.active a {
    background: #2b303a;
    color: #fff
}
.menu li.right {
    float: right
}
.menu ul, .menu ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 99999;
    width: 4em;
    background: #303641;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3)
}
.menu ul {
    top: 60px;
    left: 0
}
.menu ul li ul {
    top: 0;
    left: 100%
}
.menu ul li {
    clear: both;
    width: 4em;
    border: 0;
    font-size: 12px
}
.menu ul li a {
    padding: 10px 20px;
    width: 4em;
    color: #dedede;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    float: left;
    clear: both;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: color .2s linear, background .2s linear;
    -moz-transition: color .2s linear, background .2s linear;
    -o-transition: color .2s linear, background .2s linear;
    transition: color .2s linear, background .2s linear
}
menu>li.showhide {
    display: none;
    width: 4em;
    height: 2.5em;
    cursor: pointer;
    color: #dedede;
    border-bottom: solid 1px rgba(0,0,0,0.1);
    background: #303641;
}
menu>li.showhide span.title {
    margin: 16px 0 0 25px;
    float: left
}
.menu>li.showhide span.icon {
    margin: 17px 20px;
    float: right
}
.menu>li.showhide .icon em {
    margin-bottom: 3px;
    display: block;
    width: 20px;
    height: 2px;
    background: #ccc
}
.menu.vertical {
    width: 4em;
}
.menu.vertical li {
    width: 4em;
}
.menu.vertical li a {
    display: inline-block!important;
    width: 4em;
    padding: 18px 20px 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
.menu.vertical ul li {
    width: 4em;
}
.menu.vertical ul, .menu.vertical ul li ul {
    width: 4em;
}
.menu.vertical ul {
    top: 0;
    left: 100%
}
.menu.vertical ul li ul {
    top: 1px
}

的JavaScript ：

 $.fn.menu=function(e){function r(){$(".menu").find("li").unbind();$(".menu").find("ul").hide(0);if(window.innerWidth<=768){o();s();if(n==true){a();n=false}}else{u();i();if(t.type=="horizontal"&&t.align=="right"&&n==false){a();n=true}}}function i(){$(".menu li").bind("mouseover",function(){$(this).children("ul").stop(true,true).fadeIn(t.speed)}).bind("mouseleave",function(){$(this).children("ul").stop(true,true).fadeOut(t.speed)})}function s(){$(".menu > li").bind("click",function(){if($(this).children("ul").css("display")=="none"){$(this).find("ul").slideDown(t.interval)}else{$(this).children("ul").slideUp(t.interval)}})}function o(){$(".menu > li:not(.showhide)").hide(0);$("-menu > li.showhide").show(0);$(".menu > li.showhide").bind("click",function(){if($(".menu > li").is(":hidden")){$(".menu > li").slideDown(300)}else{$(".menu > li:not(.showhide)").slideUp(300);$(".menu > li.showhide").show(0)}})}function u(){$(".menu > li").show(0);$(".menu > li.showhide").hide(0)}function a(){$(".menu > li").addClass("right");var e=$(".menu").width();var t=$(".menu").children("li");var n=0;$(".menu").children("li:not(.showhide)").detach();for(var r=t.length;r>=1;r--){$(".menu").append(t[r])}}var t={speed:300,type:"horizontal",align:"left"};$.extend(t,e);var n=false;if(t.type=="vertical"){$(".menu").addClass("vertical");if(t.align=="right"){$(".menu").addClass("right")}}$(".menu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");r();$(window).resize(function(){r()})}

提前感谢您提供的任何帮助！我很感激：）

Answer 1

需要重置一些事项。

从overflow: hidden移除ul.menu。否则你的弹出窗口将被隐藏。：）
将.menu>li设置为position: relative，然后将子ul设置为position: absolute，然后根据需要进行偏移。
请确保使用子选择器而不是后代选择器，使用初始css定位特定<a>元素。也就是说，使用.menu > li > a vs .menu li a。前者仅定位a的{{1}}个孩子，li是.menu的孩子。后者将定位作为a后代的所有li的后代的所有.menu，其中包含您的弹出式<a>。

This fiddle 应该让你开始。

我正在尝试使用弹出窗口创建一个垂直菜单

1 个答案: