整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

「前端制作」移动端侧边滑出导航栏

动端侧边滑出导航栏是一种常见的UI设计，可以提升用户体验和导航的可用性。本文将详细介绍如何利用前端技术实现移动端侧边滑出导航栏，并给出相关的代码示例。

首先，我们需要一个触发导航栏滑出的按钮。通常情况下，这个按钮会放在页面的顶部或者底部，以便用户方便点击。我们可以使用HTML和CSS来创建这个按钮。

HTML代码如下所示：

```html菜单```

CSS代码如下所示：

```css.nav-button { position: fixed; top: 20px; left: 20px; width: 60px; height: 60px; background-color: #000; color: #fff; border: 0; border-radius: 50%; font-size: 16px;}```

以上代码创建了一个圆形的按钮，并设置了一些基本样式，可以根据实际需求进行调整。

接下来，我们需要实现导航栏滑出的效果。可以使用CSS来实现，具体代码如下：

HTML代码如下所示：

```html```

CSS代码如下所示：

```css.nav-menu { position: fixed; top: 0; left: -80%; width: 80%; height: ; background-color: #fff; transition: all 0.3s ease;}

.nav-menu.open { left: 0;}

.nav-menu ul { list-style: none; padding: 0; margin: 0;}

.nav-menu ul li { padding: 10px 20px; border-bottom: 1px solid #ccc; cursor: pointer;}

.nav-menu ul li:last-child { border-bottom: none;}```

以上代码创建了一个导航栏，并设置了一些基本样式。使用左侧负值的left属性隐藏了导航栏，当给导航栏添加open类名后，left属性变为0，导航栏就可以滑出。

接下来，我们需要使用JavaScript来处理按钮的点击事件，实现导航栏的滑出和收起。可以使用以下代码：

```javascriptconst navButton = document.querySelector('.nav-button');const navMenu = document.querySelector('.nav-menu');

navButton.addEventListener('click', () => { navMenu.classList.toggle('open');});```

以上代码添加了一个点击事件监听器，当按钮被点击时，toggle方法会切换导航栏元素的open类，从而实现导航栏的滑出和收起效果。

至此，我们已经完成了移动端侧边滑出导航栏的制作。当用户点击按钮时，导航栏将从左侧滑出，再次点击按钮时，导航栏将收起。这种交互方式可以为用户提供良好的导航体验。

总结一下，要实现移动端侧边滑出导航栏，我们需要使用HTML、CSS和JavaScript。通过添加一个按钮和一个导航栏元素，利用CSS的transition属性和JavaScript的事件监听器，可以轻松实现这一效果。希望本文的内容对你有所帮助。

果图

动态图没法彰显它原本的魅力，可以自行下载后观看!

代码过长需要文档版源码来我的前端群581549454，已上传到群文件

CSS3源码：

@charset "utf-8";

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, textarea { margin: 0; padding: 0; font-size: 14px; line-height: 24px; color: #000; font-family: 'microsoft yahei',verdana,Tahoma; }

ol, ul, li { list-style: none; line-height: 22px; }

ol, ul { zoom: 1; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

img { border: none; max-width: 100%; }

a, a:link, a:visited { cursor: pointer; text-decoration: none;}

a:hover { cursor: pointer; }

.table { border-collapse: collapse; border-spacing: 0; }

.table td { border: solid 1px #666; }

.clear { clear: both; float: none; overflow: hidden; height: 0; font-size: 0; }

.clearFix:after { clear: both; display: block; visibility: hidden; height: 0; line-height: 0; content: "."; }

.clearFix { zoom: 1; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.font { font: 14px/24px "Comic Sans MS"; }

:focus { outline: none; }

.css3pie { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(css3pie/PIE.htc); }

/*------------------------------------------------------------------------------------------------------------------------------------------------*/

body{ font-size: 14px; font-family: "黑体-简","黑体","微软雅黑", Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; width: 100%; margin: 0 auto; background-color: #313131; overflow-x: hidden; }

.wrap{width:100%;height:1000px;}

.wrap p{font-size: 48px;text-align: center;color: #fff;padding-top: 280px;line-height: 60px;}

.logo{

text-align: center;

vertical-align: middle;

background: #357dd7;

margin-left: 45%;

top: 20%;

z-index: 11;

width: 240px;

height: 240px;

overflow: hidden;

position: relative;

}

.logo:hover{

box-shadow: 0px 0px 10px #333;

}

.logo h1{

display: table-cell;

vertical-align: middle;

width: 240px;

height: 240px;

}

.logo a{width: 240px;height: 240px;overflow: hidden;}

.logo a:before{

content: '';

position: absolute;

left: -230%;

top: 0px;

width: 200%;

height: 120%;

background: #1f415f;

z-index: 1;

transform:skew(30deg, 0);

-webkit-transform:skew(30deg, 0);

-ms-transform:skew(30deg, 0);

-moz-transform:skew(30deg, 0);

-o-transform:skew(30deg, 0);

transition:all .5s;

-moz-transition:all .5s;

-webkit-transition:all .5s;

-o-transition:all .5s;

}

.logo a:hover{

background: #357dd7;

}

.logo a:hover:before {

left: -60px;

}

.logo img {

position: relative;

z-index: 1;

}

/*一级导航*/

.nav-main{

position: fixed;

top: 0;

z-index: 12;

height: 100%;

width: 100px;

color: #fff;

background: #111213;

}

.nav-main a{color: #fff;}

.nav-box{

position: relative;

perspective: 200px;

-webkit-perspective: 200px;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

height: 100%;

z-index: 99;

}

.nav-ul li a{

display: block;

width: 100px;

height: 100px;

overflow: hidden;

text-align: center;

position: relative;

transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

-o-transition: all .5s;

}

.nav-ul li a:before{

content: '';

position: absolute;

left: -240px;

top: 0px;

width: 200px;

height: 100%;

background: #629feb;

z-index: 1;

transform: skew(30deg, 0);

-webkit-transform: skew(30deg, 0);

-ms-transform: skew(30deg, 0);

-moz-transform: skew(30deg, 0);

-o-transform: skew(30deg, 0);

transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

-o-transition: all .5s;

}

.nav-ul li a:hover{background: #357dd7;}

.nav-ul li a:hover:before{left: -30px;}

.nav-ul li a:after{

content: '';

position: absolute;

width: 100%;

height: 30px;

left: 0;

top: 20px;

z-index: 1;

}

.nav-ul li a span{

display: block;

margin-top: 60px;

perspective: ;

position: relative;

z-index: 1;

}

.nav-slide{

position: fixed;

left: 100px;

top: 0;

width: 240px;

height: 100%;

background: #252829;

transform: rotateY(120deg);

-webkit-transform: rotateY(120deg);

-moz-transform: rotateY(120deg);

-o-transform: rotateY(120deg);

-ms-transform: rotateY(120deg);

z-index: 99;

visibility: hidden;

transform-origin: 0 0;

-webkit-transform-origin: 0 0;

-moz-transform-origin: 0 0;

-o-transform-origin: 0 0;

-ms-transform-origin: 0 0;

backface-visibility: hidden;

-webkit-backface-visibility: hidden;

transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition-timing-function: cubic-bezier(.08, .72, .71, .96);

-webkit-transition-timing-function: cubic-bezier(.08, .72, .71, .96);

}

.nav-slide.hover{

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

z-index: 15;

visibility: visible;

}

/*二级菜单*/

.nav-slide-o li a{

line-height: 50px;

display: block;

padding: 0 20px;

font-size: 14px;

overflow: hidden;

text-align: left;

position: relative;

transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

}

.nav-slide-o li a:before{

content: '';

position: absolute;

left: -230%;

top: 0px;

width: 200%;

height: 100%;

background: #629feb;

z-index: 1;

transform: skew(30deg, 0);

-webkit-transform: skew(30deg, 0);

-moz-transform: skew(30deg, 0);

-o-transform: skew(30deg, 0);

-ms-transform: skew(30deg, 0);

transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

}

.nav-slide-o li a:hover{background: #357dd7;}

.nav-slide-o li a:hover:before{left: -60px;}

.nav-slide-o li a span{position: relative;z-index: 1;}

.nav-slide-o {display: none;}

作为前端工作人员，都知道锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。但是点击瞄点超链接后，发现定位不准确，不能随心所欲，这下很苦逼，，，下面的这个js定位导航菜单定位很精准，比瞄点定位好用多了，，精准度都可以自由调整。

<!Doctype html>

<html>

<head>

<meta charset="gb2312">

<title>js定位导航菜单</title>

<style type="text/css">

*{margin:0;padding:0;} .w{width:1200px;margin:0 auto;}

.nav{height:56px;margin-top:500px;margin-bottom:200px;}

.box{border:1px solid red;height:800px;margin-bottom:200px;}

.nav,#scroll_nav{width:100%;background:#7a3e47;color:#fff;position:relative;}

#scroll_nav .pubW_c{height:56px;}

#scroll_nav ul {margin-left:32px;}

#scroll_nav ul li{font-size:20px;float:left;display:inline;

width:152px;text-align:center;line-height:56px;color:#fff;}

#scroll_nav ul li a{color:#fff; width:152px;height:56px;margin:0 auto;display:block;}

#scroll_nav ul li a:hover,#scroll_nav ul li a.active{color:#7a3e47;

background:#fff;text-decoration:none;}

</style>

</head>

<body>

<div class="nav oh">

<div id="scroll_nav">

<div class="pubW_c w">

<ul class="fl">

<li><a href="javascript：void(0);">box01</a></li>

<li><a href="javascript：void(0);">box02</a></li>

<li><a href="javascript：void(0);">box03</a></li>

<li><a href="javascript：void(0);">box04</a></li>

</ul>

</div>

</div>

</div>

<div class="box w scroll_top">我是box01</div>

<div class="box w scroll_top">我是box02</div>

<div class="box w scroll_top">我是box03</div>

<div class="box w scroll_top">我是box04</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

(function($) {

$.fn.navScroll = function(o) {

o = $.extend({

navAddClass: 'cur',

conAddClass: 'posi',

navH: 60,

speedArg: 7

}, o || {});

var navAdd = o.navAddClass,conAdd = o.conAddClass,navH = o.navH,speedArg = o.speedArg;

var _el = $(this),arrPos = [],timer = null;

$('.' + conAdd + '').each(function() {

arrPos.push($(this).offset().top);

});

_el.each(function(index) {

$(this).attr('index', index);

$(this).bind('click',

function() {

$(window).unbind('scroll', WinScroll);

_el.each(function() {

$(this).removeClass(navAdd);

});

$(this).addClass(navAdd);

fnScroll($(this));

});

});

function fnScroll(obj) {

var iSpeed = 0;

var iTarget = arrPos[obj.attr('index')]-navH;

//alert(iTarget);

clearInterval(timer);

timer = setInterval(function() {

var oLength=$("#scroll_nav a").length;

var cur = $(document).scrollTop(),clientH = $(window).height(),docH = $(document).height();

//alert(cur+" "+clientH+" " +docH+" "+iTarget);

if(obj.attr('index')==oLength-1){

if((cur+clientH)>=docH){

iTarget=docH-clientH;

//alert(iTarget);

}

}

iSpeed = (iTarget - cur) / speedArg;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)

if (Math.abs(iTarget - cur) < 1) {

clearInterval(timer);

window.scrollTo(0, iTarget);

$(window).bind('scroll', WinScroll);

} else {

window.scrollTo(0, cur + iSpeed);

}

},

30);

}

function WinScroll() {

var cur = $(document).scrollTop()+navH;

$.each(arrPos,

function(i) {

if (cur >= arrPos[i]) {

if (cur < arrPos[i + 1]) {

_el.each(function() {

if ($(this).attr('index') == i) {

$(this).addClass(navAdd);

} else {

$(this).removeClass(navAdd);

}

});

} else {

_el.each(function() {

if ($(this).attr('index') == arrPos.length - 1) {

$(this).addClass(navAdd);

} else {

$(this).removeClass(navAdd);

}

});

}

}

});

};

$(window).on('scroll', WinScroll);

};

})(jQuery);

$('#scroll_nav ul li a').navScroll({

navAddClass: 'active',

conAddClass: 'scroll_top',

navH: 70,

speedArg: 7

});

window.onload = window.onscroll = function() {

var oNav=document.getElementById('scroll_nav');

var oTop = document.documentElement.scrollTop || document.body.scrollTop;

//alert(oTop);

if (oTop >= 600) {

if (typeof document.body.style.maxHeight === "undefined") {

oNav.style.top = oTop + 'px';

} else {

oNav.style.position = 'fixed';

oNav.style.top = 0;

oNav.style.zIndex=999999;

}

} else {

oNav.style.position = 'absolute';

oNav.style.top = 0+"px";

}

};

</script>

</body>

</html>

效果演示地址：http://tangjiusheng.com/jstx/131.html


在线咨询
上一篇：预览版中引入Javascript支持，实现高级数据处理逻辑
下一篇：绚丽的效果肯定需要动画的支持，Vue动画入门开篇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 富平县 静海县 封开县 魏都区 古蔺县 河源 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服