1
我正在嘗試創建一個從左到右打開的滑塊菜單。 我創建了一個與菜單和菜單本身分開的箭頭按鈕，它是一個從左到右出現的白色矩形。滑塊菜單錯誤和活動按鈕
我有幾個問題：
- 第一箭頭看起來不像滑動菜單，是從所有其它組分分離的一部分。
- 我有一個奇怪的錯誤，當我打開菜單時，它首先可以根據內容高度以不同的大小出現，然後高度以相同的方式改變。
- 當我打開滑塊菜單時，上層菜單的高度無理由延伸。
任何線索如何解決這個錯誤或使這個菜單看起來更漂亮？
代碼的菜單如下：
$(function() {
$("#arrow_btn").click(function() {
$("#navbar").toggleClass('active');
$("#upper_left_menu").toggleClass('open_left_menu');
console.log("look for arrow btn element");
console.log("upper_left_menu", $("#upper_left_menu"));
console.log('$("#navbar")', $("#navbar"));
});
$(".project_item").click(function (event) {
var list = $(this).siblings();
var i = $(this).find('i');
$(list).toggleClass('closed_nested_list');
if ($(i).hasClass('fa-plus')) {
$(i).removeClass('fa-plus');
$(i).addClass('fa-minus');
} else {
$(i).addClass('fa-plus');
$(i).removeClass('fa-minus');
}
console.log('traverse over all project items');
console.log('i', i);
console.log('list', list);
});
});.arrow {
\t color: gray;
\t font: bold 11px "Helvetica";
\t padding: 2px;
\t text-decoration: none;
\t -webkit-border-radius: 20px;
\t -moz-border-radius: 20px;
\t border-radius: 20px;
}
.arrow:after {
\t background: gray;
\t color: #FFF;
\t content: ">";
\t display: inline-block;
\t font: bold 11px "Georgia";
\t height: 25px;
\t line-height: 25px;
\t margin-left: 2px;
\t text-align: center;
\t width: 25px;
\t -webkit-border-radius: 20px;
\t -moz-border-radius: 20px;
\t border-radius: 20px;
}
.arrow:hover:after{
background: #1679C6;
}
.upper_menu{
position:relative;
display:block;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
.open_left_menu{
background-color:white;
width:30px;
height:30px;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
#upper_left_menu{
}
#upper_right_menu{
position: absolute;
top: 0px;
right: 0px;
}
#exclamation-triangle,
#envelope{
font-size: 24px;
}
.warning,
.email{
margin: 10px;
}
#exclamation_notifications_count,
#email_notifications_count{
padding-left: 5px;
}
#navbar {
position: absolute;
left: -16em;
top: 0;
bottom: 0;
height: 100%;
background-color: white;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
margin-top: 26px;
animation: 10s;
}
#navbar ul {
width: 224px;
list-style-type: none;
margin: 0;
padding: 1em;
}
/* hovering */
#navbar, #navbar * {
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
#navbar.active {
left: 0px;
}
.nested_list{
display:inline-block;
visibility:visible;
}
.closed_nested_list{
display:none;
}
.project_item{
font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
font-size: 18px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="upper_menu">
<div id="upper_left_menu">
<span id="arrow_btn" class="arrow"></span>
</div>
<div id="upper_right_menu">
<a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a>
<a href="#" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a>
</div>
</nav>
<nav id="navbar">
<ul>
<li class="project_container">
<span class="project_item" >
<i class="fa fa-plus"></i>
FDR Project
</span>
<ul id="listOne" class="nested_list closed_nested_list">
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit01</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit02</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit03</li>
</ul>
</li>
<li class="project_container">
<span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span>
<ul id="listTwo" class="nested_list closed_nested_list">
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit01</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit02</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit03</li>
</ul>
</li>
<li class="project_container">
<span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span>
<ul id="listThree" class="nested_list closed_nested_list">
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit01</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit02</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit03</li>
</ul>
</li>
<li class="project_container">
<span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span>
<ul id="listFour" class="nested_list closed_nested_list">
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit01</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit02</li>
<li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" /> Unit03</li>
</ul>
</li>
</ul>
</nav>
任何建議如何解決第二個問題？ – Brk