您正在使用 IPV4 [3.237.0.123] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS实现移动端可折叠导航菜单
内容摘要: !DOCTYPE htmlhtml lang='en'head meta charset='UTF-8' titleindex/title link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='external nofollow'......
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>index</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="external nofollow" >

<link rel="stylesheet" href="css/style.css" rel="external nofollow" >

</head>


<body>


<div class="htmleaf-container">

<div id="wrapper">


<!-- 菜单 -->

<div class="menu">

<img id="menu-bg" src="images/golden-gate-lights.jpg" />

<ul>

<li><a href="">About</a></li>

<li><a href="">Share</a></li>

<li><a href="">Activity</a></li>

<li><a href="">Settings</a></li>

<li><a href="">Contact</a></li>

</ul>

</div>


<div class="screen">

<div class="navbar"></div>

<div class="list">

<div class="item">

<div class="img"></div>

<span></span>

<span></span>

<span></span>

</div>

<div class="item">

<div class="img"></div>

<span></span>

<span></span>

<span></span>

</div>

<div class="item">

<div class="img"></div>

<span></span>

<span></span>

<span></span>

</div>

<div class="item">

<div class="img"></div>

<span></span>

<span></span>

<span></span>

</div>

</div>

<div class="burger">

<div class="x"></div>

<div class="y"></div>

<div class="z"></div>

</div>

</div>


</div>

</div>


<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>

<script src='js/script.js'></script>

</body>

</html>

CSS

/*basic*/

@import "https://fonts.googleapis.com/css?family=Raleway:200,500,700,800";

@font-face {

font-family:icomoon;

src:url(../fonts/icomoon.eot?rretjt);

src:url(../fonts/icomoon.eot?#iefixrretjt) format('embedded-opentype'),

url(../fonts/icomoon.woff?rretjt) format('woff'),

url(../fonts/icomoon.ttf?rretjt) format('truetype'),

url(../fonts/icomoon.svg?rretjt#icomoon) format('svg');

font-weight:400;

font-style:normal

}

[class^=icon-],[class*=" icon-"] {

font-family:icomoon;

speak:none;

font-style:normal;

font-weight:400;

font-variant:normal;

text-transform:none;

line-height:1;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale

}

body,html {

font-size:100%;

padding:0;

margin:0

}

*,*:after,*:before {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box

}

.clearfix:before,.clearfix:after {

content:" ";

display:table

}

.clearfix:after {

clear:both

}

body {

background:#f9f7f6;

color:#404d5b;

font-weight:500;

font-size:1.05em;

font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

}

a {

color:#2fa0ec;

text-decoration:none;

outline:none

}

a:hover,a:focus {

color:#74777b

}

.htmleaf-container {

margin:0 auto;

text-align:center;

overflow:hidden

}

.htmleaf-content {

font-size:150%;

padding:1em 0

}

.htmleaf-content h2 {

margin:0 0 2em;

opacity:.1

}

.htmleaf-content p {

margin:1em 0;

padding:5em 0 0;

font-size:.65em

}

.bgcolor-1 {

background:#f0efee

}

.bgcolor-2 {

background:#f9f9f9

}

.bgcolor-3 {

background:#e8e8e8

}

.bgcolor-4 {

background:#2f3238;

color:#fff

}

.bgcolor-5 {

background:#df6659;

color:#521e18

}

.bgcolor-6 {

background:#2fa8ec

}

.bgcolor-7 {

background:#d0d6d6

}

.bgcolor-8 {

background:#3d4444;

color:#fff

}

.bgcolor-9 {

background:#ef3f52;

color:#fff

}

.bgcolor-10 {

background:#64448f;

color:#fff

}

.bgcolor-11 {

background:#3755ad;

color:#fff

}

.bgcolor-12 {

background:#3498db;

color:#fff

}

.htmleaf-header {

padding:1em 190px;

letter-spacing:-1px;

text-align:center

}

.htmleaf-header h1 {

color:#fff;

font-weight:600;

font-size:2em;

line-height:1;

margin-bottom:0;

font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

}

.htmleaf-header h1 span {

font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif;

display:block;

font-size:60%;

font-weight:400;

padding:.8em 0 .5em;

color:#c3c8cd

}

.htmleaf-demo a {

color:#1d7db1;

text-decoration:none

}

.htmleaf-demo {

width:100%;

padding-bottom:1.2em

}

.htmleaf-demo a {

display:inline-block;

margin:.5em;

padding:.6em 1em;

border:3px solid #1d7db1;

font-weight:700

}

.htmleaf-demo a:hover {

opacity:.6

}

.htmleaf-demo a.current {

background:#1d7db1;

color:#fff

}

.htmleaf-links {

position:relative;

display:inline-block;

white-space:nowrap;

font-size:1.5em;

text-align:center

}

.htmleaf-links::after {

position:absolute;

top:0;

left:50%;

margin-left:-1px;

width:2px;

height:100%;

background:#dbdbdb;

content:'';

-webkit-transform:rotate3d(0,0,1,22.5deg);

transform:rotate3d(0,0,1,22.5deg)

}

.htmleaf-icon {

display:inline-block;

margin:.5em;

padding:0 0;

width:1.5em;

text-decoration:none

}

.htmleaf-icon span {

display:none

}

.htmleaf-icon:before {

margin:0 5px;

text-transform:none;

font-weight:400;

font-style:normal;

font-variant:normal;

font-family:icomoon;

line-height:1;

speak:none;

-webkit-font-smoothing:antialiased

}

.htmleaf-footer {

width:100%;

padding-top:10px

}

.htmleaf-small {

font-size:.8em

}

.center {

text-align:center

}

.related {

position:absolute;

top:100%;

left:0;

width:100%;

color:#fff;

background:#333;

text-align:center;

font-size:1.25em;

padding:.5em 0;

overflow:hidden

}

.related>a {

vertical-align:top;

width:calc(100% - 20px);

max-width:340px;

display:inline-block;

text-align:center;

margin:20px 10px;

padding:25px;

font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

}

.related a {

display:inline-block;

text-align:left;

margin:20px auto;

padding:10px 20px;

opacity:.8;

-webkit-transition:opacity .3s;

transition:opacity .3s;

-webkit-backface-visibility:hidden

}

.related a:hover,.related a:active {

opacity:1

}

.related a img {

max-width:100%;

opacity:.8;

border-radius:4px

}

.related a:hover img,.related a:active img {

opacity:1

}

.related h3 {

font-family:microsoft yahei,sans-serif

}

.related a h3 {

font-weight:300;

margin-top:.15em;

color:#fff

}

.icon-htmleaf-home-outline:before {

content:"\e5000"

}

.icon-htmleaf-arrow-forward-outline:before {

content:"\e5001"

}

@media screen and (max-width:50em) {

.htmleaf-header {

padding:3em 10% 4em

}

.htmleaf-header h1 {

font-size:2em

}

}@media screen and (max-width:40em) {

.htmleaf-header h1 {

font-size:1.5em

}

}@media screen and (max-width:30em) {

.htmleaf-header h1 {

font-size:1.2em

}

}


/*demo1*/

* {

margin:0;

padding:0

}

body {

background:#383c55;

width:100%;

height:100%;

font:12px open sans,sans-serif

}

#wrapper {

width: 100%;

height: 100%;

overflow: hidden;

position: absolute;

background: #111;

}

div.screen {

width: 100%;

height: 100%;

overflow:hidden;

position:absolute;

top:0;

left:0;

background:#31558a;

-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

-o-transition:all 500ms cubic-bezier(0,.995,.99,1);

transition:all 500ms cubic-bezier(0,.995,.99,1)

}

div.screen.animate {

left:80%;

-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

-o-transition:all 500ms cubic-bezier(0,.995,.99,1);

transition:all 500ms cubic-bezier(0,.995,.99,1)

}

.list {

margin-top: 100px;

text-align: left;

}

.item {

height: 328px;

padding-left: 182px;

clear: both;

}

.item .img,.item span {

background:#214273;

border-radius:3px

}

.item .img {

float: left;

width: 200px;

height: 200px;

margin-left: -93px;

}

.item span {

height: 30px;

width: 62%;

margin-bottom: 48px;

margin-left: 9%;

float: left;

}

.item span:nth-of-type(3) {

width:75px;

margin-botom:0

}

div.burger {

height: 100px;

width: 100px;

position: absolute;

top: 11px;

left: 50px;

cursor: pointer;

}

div.x,div.y,div.z {

position:absolute;

margin:auto;

top:0;

bottom:0;

background:#fff;

border-radius:2px;

-webkit-transition:all 200ms ease-out;

-moz-transition:all 200ms ease-out;

-ms-transition:all 200ms ease-out;

-o-transition:all 200ms ease-out;

transition:all 200ms ease-out

}

div.x,div.y,div.z {

height: 10px;

width: 60px;

-webkit-transition:all 100ms ease-out;

-moz-transition:all 100ms ease-out;

-ms-transition:all 100ms ease-out;

-o-transition:all 100ms ease-out;

transition:all 100ms ease-out

}

div.y.squize {

width:0;

-webkit-transition:all 100ms ease-out;

-moz-transition:all 100ms ease-out;

-ms-transition:all 100ms ease-out;

-o-transition:all 100ms ease-out;

transition:all 100ms ease-out

}

div.y {

top:39px;

}

div.z {

top:80px;

}

div.open div.x,div.open div.z {

top:19px;

-webkit-transition:all 70ms ease-out;

-moz-transition:all 70ms ease-out;

-ms-transition:all 70ms ease-out;

-o-transition:all 70ms ease-out;

transition:all 70ms ease-out

}

div.rotate30 {

-ms-transform:rotate(30deg);

-webkit-transform:rotate(30deg);

transform:rotate(30deg);

-webkit-transition:all 70ms ease-out;

-moz-transition:all 70ms ease-out;

-ms-transition:all 70ms ease-out;

-o-transition:all 70ms ease-out;

transition:all 70ms ease-out

}

div.rotate150 {

-ms-transform:rotate(150deg);

-webkit-transform:rotate(150deg);

transform:rotate(150deg);

-webkit-transition:all 70ms ease-out;

-moz-transition:all 70ms ease-out;

-ms-transition:all 70ms ease-out;

-o-transition:all 70ms ease-out;

transition:all 70ms ease-out

}

div.rotate45 {

-ms-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

-webkit-transition:all 100ms ease-out;

-moz-transition:all 100ms ease-out;

-ms-transition:all 100ms ease-out;

-o-transition:all 100ms ease-out;

transition:all 100ms ease-out

}

div.rotate135 {

-ms-transform:rotate(135deg);

-webkit-transform:rotate(135deg);

transform:rotate(135deg);

-webkit-transition:all 100ms ease-out;

-moz-transition:all 100ms ease-out;

-ms-transition:all 100ms ease-out;

-o-transition:all 100ms ease-out;

transition:all 100ms ease-out

}

div.navbar {

height:200px;

background:#385e97

}

div.menu {

height:568px;

width:320px;

margin-left:-190px;

opacity:0;

position:relative;

-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

-o-transition:all 500ms cubic-bezier(0,.995,.99,1);

transition:all 500ms cubic-bezier(0,.995,.99,1)

}

#menu-bg {

position:absolute;

left:-10px;

top:-120px;

opacity:.3;

-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

-o-transition:all 500ms cubic-bezier(0,.995,.99,1);

transition:all 500ms cubic-bezier(0,.995,.99,1)

}

div.menu.animate #menu-bg {

width: 350%;

left: -143px;

-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

-o-transition:all 500ms cubic-bezier(0,.995,.99,1);

transition:all 500ms cubic-bezier(0,.995,.99,1)

}

div.menu.animate {

width:100%;

margin-left: -110px;

opacity: 1;

-webkit-transition: all 500ms cubic-bezier(0,.995,.99,1);

-moz-transition: all 500ms cubic-bezier(0,.995,.99,1);

-ms-transition: all 500ms cubic-bezier(0,.995,.99,1);

-o-transition: all 500ms cubic-bezier(0,.995,.99,1);

transition: all 500ms cubic-bezier(0,.995,.99,1);

}

div.menu ul {

position: relative;

padding-top: 200px;

}

div.menu ul li {

list-style: none;

width: 100%;

margin-top: 120px;

text-align: left;

padding-left: 300px;

font-size: 50px;

}

div.menu ul li a {

color:#fff;

text-decoration:none;

letter-spacing:1px

}

div.menu.animate ul li {

margin-left: 80px;

-webkit-transition:all 800ms cubic-bezier(0,.995,.99,1);

-moz-transition:all 800ms cubic-bezier(0,.995,.99,1);

-ms-transition:all 800ms cubic-bezier(0,.995,.99,1);

-o-transition:all 800ms cubic-bezier(0,.995,.99,1);

transition:all 800ms cubic-bezier(0,.995,.99,1)

}

div.menu.animate li:nth-of-type(1) {

transition-delay:0s

}

div.menu.animate li:nth-of-type(2) {

transition-delay:.06s

}

div.menu.animate li:nth-of-type(3) {

transition-delay:.12s

}

div.menu.animate li:nth-of-type(4) {

transition-delay:.18s

}

div.menu.animate li:nth-of-type(5) {

transition-delay:.24s

}


js

$(document).ready(function() {

if ('ontouchstart' in window) {

var click = 'touchstart';

} else {

var click = 'click';

}

$('div.burger').on(click, function () {

if (!$(this).hasClass('open')) {

openMenu();

} else {

closeMenu();

}

});

$('div.menu ul li a').on(click, function (e) {

e.preventDefault();

closeMenu();

});

function openMenu() {

$('div.burger').addClass('open');

$('div.y').fadeOut(100);

$('div.screen').addClass('animate');

setTimeout(function () {

$('div.x').addClass('rotate30');

$('div.z').addClass('rotate150');

$('.menu').addClass('animate');

setTimeout(function () {

$('div.x').addClass('rotate45');

$('div.z').addClass('rotate135');

}, 100);

}, 10);

}

function closeMenu() {

$('div.screen, .menu').removeClass('animate');

$('div.y').fadeIn(150);

$('div.burger').removeClass('open');

$('div.x').removeClass('rotate45').addClass('rotate30');

$('div.z').removeClass('rotate135').addClass('rotate150');

setTimeout(function () {

$('div.x').removeClass('rotate30');

$('div.z').removeClass('rotate150');

}, 50);

setTimeout(function () {

$('div.x, div.z').removeClass('collapse');

}, 70);

}

});

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:让IE等浏览器的后退功能失效

 

下一篇:JS+CSS实现简单的二级下拉导航菜单效果

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:5
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....