移动端创意导航

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</link rel="stylesheet" href="css/reset.css"="css/style.css">

bodydiv class="screen"nav ="nav">
        ul>
            li><a href="#">搜 索a></>主 页>HTML5学习>CSS3学习>联系我们nav="nav-toggle"="icon"div<!-- 背景内容区 -->
    ="lower-screen"="card"script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='js/script.js'html>

reset.css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display:block
}
audio,canvas,video {inline-block
}
audio:not([controls]) {none;
    height:0
}
[hidden] {none
}
html {
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body {
    margin:
a:focus {
    outline:thin dotted
}
a:active,a:hover {
h1 {
    font-size:2em;.67em 0
}
abbr[title] {
    border-bottom:1px dotted
}
b,strong {
    font-weight:700
}
dfn {
    font-style:italic
}
hr {
    -moz-box-sizing:content-box;
    box-sizing:
mark {
    background:#ff0;
    color:#000
}
code,kbd,pre,samp {monospace,serif;1em
}
pre {
    white-space:pre-wrap
}
q {
    quotes:"\201C" "\201D" "\2018" "\2019"
}
small {80%
}
sub,sup {75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup {
    top:-.5em
}
sub {
    bottom:-.25em
}
img {
    border:
svg:not(:root) {
    overflow:hidden
}
figure {
fieldset {1px solid silver;0 2px;
    padding:.35em .625em .75em
}
legend {
button,input,select,textarea {inherit;normal
}
    text-transform:
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled] {default
}
input[type=checkbox],input[type=radio] {border-box;
input[type=search] {textfield;
    -webkit-box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
button::-moz-focus-inner,input::-moz-focus-inner {
textarea {auto;top
}
table {
    border-collapse:collapse;
    border-spacing:0
}

style.css

* {
  box-sizing:
  padding:
  margin:
  font-weight:300
}
html{
  font-size:37.5px;
}
body,html {
  height:100%;
}
  background-color:#4a75e6;
  font-family:microsoft yahei,sans-serif
}
*,*:after,*:before {
  -webkit-box-sizing:
  -moz-box-sizing:border-box
}
.clearfix:before,.clearfix:after {
  content:" ";
  display:table
}
.clearfix:after {
  clear:both
}
  background:#f9f7f6;
  color:#404d5b;500;1.05em;segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,1)">
a {#2fa0ec;
  text-decoration:
  outline:
a:hover,a:focus {#74777b
}
.jq22-container {0 auto;
  text-align:center;
  overflow:
.jq22-content {150%;1em 0
}
.jq22-content h2 {0 0 2em;
  opacity:.1
}
.jq22-content p {1em 0;5em 0 0;.65em
}
.bgcolor-1 {#f0efee
}
.bgcolor-2 {#f9f9f9
}
.bgcolor-3 {#e8e8e8
}
.bgcolor-4 {#2f3238;#fff
}
.bgcolor-5 {#df6659;#521e18
}
.bgcolor-6 {#2fa8ec
}
.bgcolor-7 {#d0d6d6
}
.bgcolor-8 {#3d4444;
.bgcolor-9 {#ef3f52;
.bgcolor-10 {#64448f;
.bgcolor-11 {#3755ad;
.bgcolor-12 {#3498db;
.jq22-header {1em 5.066667rem;
  letter-spacing:-0.026667rem;center
}
.jq22-header h1 {#fff;600;
  line-height:1;
  margin-bottom:
.jq22-header h1 span {block;60%;400;.8em 0 .5em;#c3c8cd
}
.jq22-demo a {#1d7db1;
.jq22-demo {
  width:
  padding-bottom:1.2em
}inline-block;.5em;.6em 1em;
  border:0.08rem solid #1d7db1;
.jq22-demo a:hover {.6
}
.jq22-demo a.current {
.jq22-links {
  position:
  white-space:nowrap;1.5em;
.jq22-links::after {absolute;
  top:
  left:50%;
  margin-left:0.053333rem;#dbdbdb;'';
  -webkit-transform:rotate3d(0,1,22.5deg);
  transform:
.jq22-icon {0 0;
.jq22-icon span {
.jq22-icon:before {0 0.133333rem;
  text-transform:
  font-style:normal;
  font-variant:icomoon;
  speak:
  -webkit-font-smoothing:antialiased
}
.jq22-footer {
  padding-top:0.266667rem
}
.jq22-small {.8em
}
.center {
.related {1.25em;.5em 0;
.related>a {
  vertical-align:top;calc(100% - 0.533333rem);
  max-width:9.066667rem;0.533333rem 0.266667rem;0.666667rem;
.related a {left;0.533333rem auto;0.266667rem 0.533333rem;.8;
  -webkit-transition:opacity .3s;
  transition:
  -webkit-backface-visibility:
.related a:hover,.related a:active {1
}
.related a img {
  border-radius:0.106667rem
}
.related a:hover img,.related a:active img {
.related h3 {
.related a h3 {300;
  margin-top:.15em;
.icon-jq22-home-outline:before {"\e5000"
}
.icon-jq22-arrow-forward-outline:before {"\e5001"
}
@media screen and (max-width:50em) {
  .jq22-header {
  padding:3em 10% 4em
}2em
}
}@media screen and (max-width:40em) {
  .jq22-header h1 {
  font-size:1.5em
}
}@media screen and (max-width:30em) {
}
body.nav-open .lower-screen {scale(.8,.8);
  -ms-transform:
body.nav-open .nav {translateY(0);translateY(0)
}
body.nav-open .nav-toggle {
  box-shadow:
body.nav-open .nav-toggle:before {93.333333rem;rgba(74,117,230,.95)
}
body.nav-open .nav-toggle .icon {
body.nav-open .nav-toggle .icon:before {translateY(0.746667rem) rotate(45deg);translateY(0.746667rem) rotate(45deg)
}
body.nav-open .nav-toggle .icon:after {translateY(-0.24rem) rotate(-45deg);translateY(-0.24rem) rotate(-45deg)
}
.screen { 100%; #ecebe9; block; hidden; relative;
}
.nav-toggle { 6.666667rem;
  z-index: 2; 50%; 1.6rem; absolute;
  cursor: pointer; -1 0.106667rem 0 rgba(0,.2);
  -webkit-transition-duration: .66s;
  transition-duration:
  -webkit-transition-timing-function: swing;
  transition-timing-function: swing;
}
.nav-toggle:before { #4a75e6; ""; translateX(-50%) translateY(-50%);
.nav-toggle .icon { 2.666667rem; 0.266667rem; #fff; 0.053333rem; 3.306667rem; 1.866667rem; .5s;
  transiting-timing-function:
.nav-toggle .icon:before,.nav-toggle .icon:after { 0;
.nav-toggle .icon:before { -0.533333rem;
}
.nav-toggle .icon:after {0.533333rem;
}
.lower-screen {
  overflow-y: scroll; translate3d(0,0);
.lower-screen::-webkit-scrollbar {
.card { 0.133333rem; center;
  border-bottom: 0.08rem solid rgba(0,.12); 0.533333rem;
  min-height: 53.333333rem; 0.266667rem;
}
.card h2 {0.133333rem
}
.card p {0.373333rem;#666;0.533333rem
}
.card p a {#4a75e6
}
.nav {8.0rem;9;0 0.533333rem;.66s;swing;translateY(100%);translateY(100%)
}
.nav ul li {
  list-style:
.nav ul li a { 1.066667rem 0; none; 1.333333rem; .25s; .25s;
}
.nav ul:hover li a {.5
}
.nav ul:hover li:hover a {1
}

script.js

$(function(){
    $('.nav-toggle').click( () {
        $('body').toggleClass('nav-open');
    });
})

 

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...