0
나는 이것을 만들기 위해 밤새도록 노력했습니다. 나는 그것이 플라이 아웃을 표시 할 곳으로 마침내 얻었지만, 모든 치수가 틀렸고 분명히 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
}
자바 스크립트 :
$.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()})}
제공하는 도움에 미리 감사드립니다! 고맙습니다. :)
플라이 아웃 용 절대 위치 사용 –