html+css3+jquery右侧弹出侧边栏导航菜单

来源：互联网 2023-03-16 23:54:28 295

html css3 jquery右侧弹出侧边栏导航菜单

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

html css3 jquery右侧弹出侧边栏导航菜单

新建html文档。

html css3 jquery右侧弹出侧边栏导航菜单

书写hmtl代码。

div class="box-bj">img src="images/wd011.jpg" />/div>

div id="mintbar">a id="closebtn" href="#">img src="images/wd02.png" />/a>/div>

div id="mint" style="display:none;position:absolute;top:0;right:0px;">

div class="box-nav-bj">img style="right:0px; top:0px;" src="images/wd06.png" />/div>

div class="box-nav">

li>a href="#">关于我们/a>/li>

li>a href="#">产品展示/a>/li>

li>a href="#">案例展示/a>/li>

li>a href="#">新闻中心/a>/li>

li>a href="#">新闻资讯/a>/li>

li>a href="#">联系我们/a>/li>

/div>

img src="images/wd07.png" alt="丝带"/>

/div>

div class="box-dibu">

div class="box-dibu2"> a href="#">img src="images/wd04.png" />/a> a href="#">img src="images/wd05.png" />/a> /div>

/div>

html css3 jquery右侧弹出侧边栏导航菜单

书写css代码。

* { margin: 0px; padding: 0px; }

.clear { clear: both }

small { padding-left: 7px; font-size: 12px; color: #000; font-weight: normal; }

.body { width: 100%; height: 100%; display: block; overflow: hidden; margin: 0px; padding: 0px }

.box-bj { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; overflow: hidden; left: 0px; }

.box-bj img { width: 100%; height: 100%; margin: 0px; padding: 0px; }

.box-nav-bj { width: 297px; height: 100%; margin: 0px; padding: 0px; position: absolute; right: 0px; z-index: -5 }

.box-nav-bj img { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; right: 0px; z-index: -5 }

.box-nav { width: 160px; height: auto; margin: 0 0 0 135px; padding: 0px; z-index: 20; position: absolute; right: 0px; top: 20%; _top: 150px; }

.box-nav li { width: 105px; height: 35px; margin: 18px 0; padding: 0px; border: 1px solid #fff; text-align: center; line-height: 35px; }

.box-nav li a { font-size: 18px; color: #fff; }

.box-nav li:hover { border: 1px solid #c2090c; }

.box-nav li:hover a { font-size: 18px; color: #c2090c; }

.box-phone { width: 150px; height: auto; margin: 0px; padding: 0px; z-index: 20; position: absolute; right: 0px; bottom: 60px; }

.box-phone p { font-family: "微软雅黑"; color: #fff; font-size: 15px; line-height: 30px; }

.box-dibu { width: 93%; height: auto; margin: 0 auto; position: absolute; bottom: 0px; left: 3%; z-index: 30; }

.box-dibu1 { width: 60%; height: auto; margin: 0 auto; float: left; font-size: 12px; color: #fff; }

.box-dibu1 p { font-size: 12px; color: #fff; line-height: 25px; }

.box-dibu2 { width: 30%; height: auto; margin: 0 auto; float: right; }

.box-dibu2 a img { width: 34px; height: 34px; float: right; display: block; margin: 0 0 0 15px; }

#mintbar { font-size: 14px; font-family: Arial, Helvetica, Sans-serif; color: #FFF; padding: 0; position: absolute; top: 40px; right: 90px; z-index: 2000; width: 47px; text-align: center; height: 62px; }

#mintbar div { position: relative; margin: 0 auto; padding-top: 10px; width: 960px; height: 30px; }

#mintbar div h2 { float: left; font-size: 16px; }

#closebtn { float: right; }

#mint { cursor: pointer; position: relative; z-index: 10; height: 100%; }

#mint img { position: absolute; right: 225px; top: 40px; display: block; }

html css3 jquery右侧弹出侧边栏导航菜单

书写并添加js代码。

script src="js/jquery1.42.min.js">/script>

script>

$(document).ready(function(){

function anim(duration){

$('#mint').animate(

{height: 'toggle'},

{duration: duration}

);

}

$('#closebtn').click(function() {

$('#mintbar').slideUp();

anim(600);

});

$('#mint').click(function() {

anim(600);

$('#mintbar').slideDown('slow');

});

/script>

html css3 jquery右侧弹出侧边栏导航菜单

5该信息未经许可获取自百度经验

代码整体结构。

html css3 jquery右侧弹出侧边栏导航菜单

查看效果。

html css3 jquery右侧弹出侧边栏导航菜单

注意事项

jquery1.42.min.js是个js包，可以网上下载。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML JQUERY

上一篇：html+css3+jquery点击之后水波动画航栏下一篇：HTML+jQuery+CSS3左侧固定子菜单3d展开动画

html+css3+jquery右侧弹出侧边栏导航菜单

工具/原料

方法/步骤

注意事项

热门文章

标签列表