分享

如何在Bootstrap中创建保留状态的侧边栏菜单?

 昵称o8H0y 2020-09-10

<html xmlns =“ http://www.\”> 

<head runat =“服务器”> 

<脚本src =“ https://www..js” > </脚本> 

<link href =“ // www.?parameter=1” 

rel =“ stylesheet”> 

<%-在此处添加css参考-%> 

<link href =“ ../ css / simple-sidebar.css” rel =“ stylesheet”类型=“ text / css” /> 

<脚本src =“ https://www.“> </脚本> 

<link rel =” stylesheet“ href =” https://www.“> 

<脚本>

$(文档).ready(函数(){ 

$(“#菜单切换”))。单击(函数(e){ 

e.preventDefault();

$(“#wrapper”)。toggleClass(“ active”);

});

});

</ / script> 

<style> 

#wrapper.active#sidebar-wrapper 

左:50px; 

</样式> 

</头> 

<正文> 

<div类=“ navbar navbar-inverse navbar-fixed-top”> 

<div类=“ container”> 

<div类=“ navbar-header”> 

<按钮类型= “ button”类=“ navbar-toggle”数据-toggle =“折叠” data-target =“。navbar-collapse”> 

<span class =“ icon-bar”> </ span> <span class =“ icon-bar “ </ span> <span class =” icon-bar“>

<div class =“ navbar-collapsecollapse”> 

<ul class =“ nav navbar-nav”> 

<li> <a href =“ /”> 主页</ a> </ li> 

<li> <a href =“ /主页/关于“>关于</ a> </ li> 

<li> <a href =” /主页/联系人“>联系人</ a> </ li> 

</ ul> 

</ div> 

</ div> 

< / div> 

<div类=“容器主体内容”样式=“ margin-top:50px”> 

</ div> 

<div id =“ wrapper”> 

<;!-补充工具栏-> 

<div id =“ sidebar -wrapper“> 

<ul id =” sidebar_menu“类=” sidebar-nav“style =“ text-align:right; padding-right:10px; 

padding-top:10px”> 

<li class =“ sidebar-brand”> <a id =“ menu-toggle” href =“#”> <span id =“ main_icon”类=“ navbar-icon fa fa-条形图标”>

</ span </ a </ li> 

</ ul> 

<ul class =“ sidebar-nav”> 

<li class =“ sidebar-brand”> <a href =“#”>启动引导程序</ a> </ li> 

<li> <a href =“#”>主页</ a> </ li> 

<li> <a href =“#”>关于</ a> </ li> 

<li> <a href =“ #“>联系人</ a> </ li> 

</ ul> 

</ div> 

<!-/#sidebar-wrapper-> 

<!-页面内容-> 

<div id =” page-content-wrapper“> 

< br /> 

<br /> 

<hr /> 

<页脚> 

并复制;2015-我的ASP.NET应用程序</ p> 

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约