怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 344 JQUERY DREAMWEAVER
html+css+jquery网站后台常用左侧下拉框架
来源：互联网
2023-03-16 23:54:29 369
html css jquery网站后台常用左侧下拉框架
工具/原料
- adobe dreamweaver
方法/步骤
准备好需要用到的图标。
新建html文档。
书写hmtl代码。
div class="nav">
div class="nav-top">
div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)">img src="images/mini.png" >/div>
/div>
ul>
li class="nav-item"> a href="javascript:;">i class="my-icon nav-icon icon_1">/i>span>网站配置/span>i class="my-icon nav-more">/i>/a>
ul>
li>a href="javascript:;">span>网站设置/span>/a>/li>
li>a href="javascript:;">span>友情链接/span>/a>/li>
li>a href="javascript:;">span>分类管理/span>/a>/li>
li>a href="javascript:;">span>系统日志/span>/a>/li>
/ul>
/li>
li class="nav-item"> a href="javascript:;">i class="my-icon nav-icon icon_2">/i>span>文章管理/span>i class="my-icon nav-more">/i>/a>
ul>
li>a href="javascript:;">span>站内新闻/span>/a>/li>
li>a href="javascript:;">span>站内公告/span>/a>/li>
li>a href="javascript:;">span>登录日志/span>/a>/li>
/ul>
/li>
li class="nav-item"> a href="javascript:;">i class="my-icon nav-icon icon_3">/i>span>订单管理/span>i class="my-icon nav-more">/i>/a>
ul>
li>a href="javascript:;">span>订单列表/span>/a>/li>
li>a href="javascript:;">span>打个酱油/span>/a>/li>
li>a href="javascript:;">span>也打酱油/span>/a>/li>
/ul>
/li>
/ul>
/div>
书写css代码。
*,body, html {height: 100%;background: #E2E2E2}
body, ul { margin: 0; padding: 0 }
body { font: 14px "微软雅黑", "宋体", "Arial Narrow", HELVETICA; -webkit-text-size-adjust: 100%; }
li { list-style: none }
a { text-decoration: none; }
.nav { width: 220px; height: 100%; background: #263238; transition: all .3s; }
.nav a { display: block; overflow: hidden; padding-left: 20px; line-height: 46px; max-height: 46px; color: #ABB1B7; transition: all .3s; }
.nav a span { margin-left: 30px; }
.nav-item { position: relative; }
.nav-item.nav-show { border-bottom: none; }
.nav-item ul { display: none; background: rgba(0,0,0,.1); }
.nav-item.nav-show ul { display: block; }
.nav-item>a:before { content: ""; position: absolute; left: 0px; width: 2px; height: 46px; background: #34A0CE; opacity: 0; transition: all .3s; }
.nav .nav-icon { font-size: 20px; position: absolute; margin-left: -1px; }
.icon_1::after { content: "\e62b"; }
.icon_2::after { content: "\e669"; }
.icon_3::after { content: "\e61d"; }
.nav-more { float: right; margin-right: 20px; font-size: 12px; transition: transform .3s; }
.nav-more::after { content: "\e621"; }
.nav-show .nav-more { transform: rotate(90deg); }
.nav-show, .nav-item>a:hover { color: #FFF; background: rgba(0,0,0,.1); }
.nav-show>a:before, .nav-item>a:hover:before { opacity: 1; }
.nav-item li:hover a { color: #FFF; background: rgba(0, 0, 0,.1); }
.nav-mini.nav { width: 60px; }
.nav-mini.nav .nav-item>a span { display: none; }
.nav-mini.nav .nav-more { margin-right: -20px; }
.nav-mini.nav .nav-item ul { position: absolute; top: 0px; left: 60px; width: 180px; z-index: 99; background: #3C474C; overflow: hidden; }
.nav-mini.nav .nav-item:hover { background: rgba(255,255,255,.1); }
.nav-mini.nav .nav-item:hover .nav-item a { color: #FFF; }
.nav-mini.nav .nav-item:hover a:before { opacity: 1; }
.nav-mini.nav .nav-item:hover ul { display: block; }
书写并添加js代码。
script src="js/jquery.min.js">/script>
script>
$(function(){
$('.nav-item>a').on('click',function(){
if (!$('.nav').hasClass('nav-mini')) {
if ($(this).next().css('display') == "none") {
//展开未展开
$('.nav-item').children('ul').slideUp(300);
$(this).next('ul').slideDown(300);
$(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
}else{
//收缩已展开
$(this).next('ul').slideUp(300);
$('.nav-item.nav-show').removeClass('nav-show');
}
}
});
//nav-mini切换
$('#mini').on('click',function(){
if (!$('.nav').hasClass('nav-mini')) {
$('.nav-item.nav-show').removeClass('nav-show');
$('.nav-item').children('ul').removeAttr('style');
$('.nav').addClass('nav-mini');
}else{
$('.nav').removeClass('nav-mini');
}
});
});
/script>
代码整体结构。
查看效果。
注意事项
- jquery.min.js是个js包，可以网上下载。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 335 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 378 JQUERY