个人中心
gpt4 book ai didi

javascript - 我正在尝试创建一个带有弹出窗口的垂直菜单

转载 作者：太空宇宙 更新时间：2023-11-04 03:47:53 24 4
gpt4 key购买 nike

我整晚都在尝试创建它。我终于把它放到了显示弹出窗口的位置，但是所有尺寸都是错误的，而且我显然不理解这里的 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()})}

提前感谢您提供的任何帮助!我很感激任何事情:)

最佳答案

一些事情需要重置。

  1. 删除 overflow: hidden来自 ul.menu .否则，您的弹出窗口将被...隐藏。 :)

  2. 设置.menu>li至 position: relative然后是子 ul s 至 position: absolute根据需要进行抵消。

  3. 确保您定位到特定的 <a>通过使用子选择器而不是后代选择器，将元素与您的初始 CSS 结合起来。即，使用 .menu > li > a对比.menu li a .前者只会针对 a是 li 的 child 是 .menu 的 child .后者将针对所有 a所有 li 的后代是 .menu 的后代这将包括您的弹出窗口的 <a>

This fiddle 应该让您开始。

关于javascript - 我正在尝试创建一个带有弹出窗口的垂直菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23816550/

24 4 0
文章推荐： python - python中的部分字符串匹配
文章推荐： python - 我怎样才能让我写的这个python面板正确地通过管道传输到dzen？
文章推荐： python - 并行运行方法
文章推荐： python - 使用 Python API 从 SoundCloud 流式传输歌曲
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com