Question

我是新手。我正在尝试构建一个像汉堡风格导航一样的侧面导航栏，如移动应用程序所示。

我可以构建一个显示here的菜单。

<div class="side-nav-menu btn-group-vertical" style="display:none">
                        <a class="btn btn-default btn-lg home-btn">
                            <img class="img-responsive" src="images/atranglogo.png"></img> 
                        </a>
                        <a class="btn btn-default btn-lg menu-btn-in about-btn "><i class="material-icons">info_outline</i>   ABOUT</a>
                        <a class="btn btn-default btn-lg menu-btn-in speakers-btn"><i class="material-icons">record_voice_over</i>   SPEAKERS</a>
                        <a class="btn btn-default btn-lg menu-btn-in schedule-btn"><i class="material-icons">alarm</i>   SCHEDULE</a>
                        <a class="btn btn-default btn-lg menu-btn-in venue-btn"><i class="material-icons">place</i>   VENUE</a>                            
                        <a class="btn btn-default btn-lg menu-btn-in team-btn"><i class="material-icons">group</i>   TEAM</a>                      
                        <a class="btn btn-default btn-lg menu-btn-in contacts-btn"><i class="material-icons">contacts</i>   CONTACTS</a>                      
                </div>

CSS如下所示：

.btn-group-vertical 
{
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    z-index: 1;
}

但是，我想构建一个导航菜单，如here和here所示，就像在现代移动应用程序中看到的那样

任何人都可以帮帮我。

此外，当我在菜单外单击时，菜单被打开。菜单不关闭。请帮我解决这个问题。

侧导航栏：与移动应用程序一样

0 个答案: