Question

我正在尝试创建一个从左到右打开的滑块菜单。我创建了一个与菜单分开的箭头按钮和菜单本身，这是一个从左到右显示的白色矩形。

我有几个问题：

首先，箭头看起来不像滑块菜单的一部分，它与所有其他组件分开。
我有一个奇怪的错误，当我打开菜单时，它首先会根据内容高度显示不同的大小，然后高度以相同的方式变化。
当我打开滑块菜单时，上层菜单的高度无缘无故延长。

任何线索如何修复此错误或使此菜单看起来更漂亮？

菜单的代码如下：

  $(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 {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    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>

Answer 1

你可以使用字体awosone图标然后它看起来会更好
当你打开滑块时，它会在右侧附加一个滚动条，我觉得它看起来很奇怪

<强> EDIT1

在你side-nav中你的css是margin-top:26px。将其更改为5%，将导航的高度更改为height:95%

Answer 2

这样的东西？

$(function () {
        $("#arrow_btn").click(function () {
            $("#navbar, .upper_menu").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 {
  color: gray;
  font: bold 11px "Helvetica";
  padding: 2px;
  text-decoration: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.arrow:after {
  background: gray;
  color: #FFF;
  content: ">";
  display: inline-block;
  font: bold 11px "Georgia";
  height: 25px;
  line-height: 25px;
  margin-left: 2px;
  text-align: center;
  width: 25px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.arrow:hover:after {
  background: #1679C6;
}

.upper_menu {
  position: absolute;      
  display: block;
  background-color: #F2F6F7;
  width: 100%;
  top: 0;
  right: 0;
}

#upper_left_menu {
  width: 30px;
  height: 30px;
  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;
}

.open_left_menu {
  margin-left: 256px;
}

#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;
  background-color: white;
  box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  cursor: pointer;
  animation: 10s;
  overflow-y: auto;
  overflow-x: hidden;
}

#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>

Answer 3

在我使用niza的解决方案后，我得到一个奇怪的情况，箭头离菜单很远，菜单和箭头之间有一个空格：

滑块菜单错误和活动按钮

3 个答案: