Создание скользящего меню с помощью css

Я хочу сделать скользящее меню, используя только CSS. В меню будет отображаться список элементов и кнопка закрытия внутри. У меня в настоящее время есть привязанный тег на моей домашней странице, который оформлен правильно, но при нажатии не делается ничего.Создание скользящего меню с помощью css

HTML:

<body class="homepage body-push"> 

    <!-- Menu --> 
<nav class="menu" id="theMenu"> 
    <div class="menu-wrap"> 
     <h1 class="logo"><a href="#home">Focus</a></h1> 
     <i class="icon-remove menu-close"></i> 
     <a href="#home">Home</a> 
     <a href="#services">Services</a> 
     <a href="#process">Process</a> 
     <a href="#portfolio">Portfolio</a> 
     <a href="#about-us">About</a> 
     <a href="#contact">Contact</a> 
     <a href="#"><i class="icon-facebook"></i></a> 
     <a href="#"><i class="icon-twitter"></i></a> 
     <a href="#"><i class="icon-dribbble"></i></a> 
     <a href="#"><i class="icon-envelope"></i></a> 
    </div> 

    <!-- Menu button --> 
    <div id="menuToggle"><i class="icon-reorder"></i></div> 
</nav> 
</body>

CSS:

.menu { 
position: fixed; 
right: -200px; 
width: 260px; 
height: 100%; 
top: 0; 
z-index: 10; 
text-align: left; 

} 
.menu.menu-open { 
    right: 0px; 
} 

.menu-wrap { 
    position: absolute; 
    top: 0; 
    left: 60px; 
    background: #1a1a1a; 
    width: 200px; 
    height: 100%; 
} 

.menu a { 
    margin-left: 20px; 
    color: #808080; 
    display: block; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 40px; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
} 

.menu a:hover { 
    color: #ffffff; 
} 

.menu a:active { 
    color: #ffffff; 
} 

.menu a > i { 
    float: left; 
    display: inline-block; 
    vertical-align: middle; 
    text-align: left; 
    width: 25px; 
    font-size: 14px; 
    line-height: 40px; 
    margin: 25px 2px; 
} 

.menu-close { 
    cursor: pointer; 
    display: block; 
    position: absolute; 
    font-size: 14px; 
    color: #808080; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    top: 20px; 
    right: 5px; 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
} 

.menu-close:hover { 
    color: #ffffff; 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
} 

/* Push the body after clicking the menu button */ 
.body-push { 
    overflow-x: hidden; 
    position: relative; 
    left: 0; 
} 

.body-push-toright { 
    left: 200px; 
} 

.body-push-toleft { 
    left: -200px; 
} 

.menu, 
.body-push { 
    -webkit-transition: all .3s ease; 
     -moz-transition: all .3s ease; 
     -ms-transition: all .3s ease; 
     -o-transition: all .3s ease; 
      transition: all .3s ease; 
} 

#menuToggle { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    z-index: 11; 
    display: block; 
    text-align: center; 
    font-size: 14px; 
    color: #ffffff; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    cursor: pointer; 
    background: rgba(0,0,0,0.25); 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
} 

#menuToggle:hover { 
    color: #ffffff; 
    background: rgba(0,0,0,0.2); 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
}

UPDATE: Я, наконец, нашел способ заставить его работать.

HTML:

<!-- Menu --> 
    <nav class="menu" id="theMenu"> 
     <div class="menu-wrap"> 
      <h1 class="logo"><a href="#">Menu</a></h1> 
      <i class="icon-remove menu-close"></i> 
      <a href="#home">Home</a> 
      <a href="#services">Services</a> 
      <a href="#process">Process</a> 
      <a href="#portfolio">Portfolio</a> 
      <a href="#about-us">About</a> 
      <a href="#contact">Contact</a> 
      <a href="www.facebook.com"><i class="icon-facebook"></i></a> 
      <a href="www.twitter.com"><i class="icon-twitter"></i></a> 
      <a href="www.dribbble.com"><i class="icon-dribbble"></i></a> 
      <a href="mailto:[email protected]"><i class="icon-envelope"></i></a> 
     </div> 

     <!-- Menu button --> 
     <div id="menuToggle"><i class="icon-reorder"></i></div> 
    </nav>

CSS:

.menu { 
    position: fixed; 
    right: -200px; 
    width: 260px; 
    height: 100%; 
    top: 0; 
    z-index: 10; 
    text-align: left; 
} 

.menu.menu-open { 
    right: 0px; 
} 

.menu-wrap { 
    position: absolute; 
    top: 0; 
    left: 60px; 
    background: #1a1a1a; 
    width: 200px; 
    height: 100%; 
} 

.menu h1.logo a { 
    font-family: 'Raleway', Helvetica, Arial, sans-serif; 
    font-size: 16px; 
    font-weight: 800; 
    letter-spacing: 0.15em; 
    line-height: 40px; 
    text-transform: uppercase; 
    color: #ffffff; 
    margin-top: 20px; 
} 

.menu h1.logo a:hover { 
    color: #f85c37; 
} 

.menu img.logo { 
    margin: 20px 0; 
    max-width: 160px; 
} 

.menu a { 
    margin-left: 20px; 
    color: #808080; 
    display: block; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 40px; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
} 

.menu a:hover { 
    color: #ffffff; 
} 

.menu a:active { 
    color: #ffffff; 
} 

.menu a > i { 
    float: left; 
    display: inline-block; 
    vertical-align: middle; 
    text-align: left; 
    width: 25px; 
    font-size: 14px; 
    line-height: 40px; 
    margin: 25px 2px; 
} 

.menu-close { 
    cursor: pointer; 
    display: block; 
    position: absolute; 
    font-size: 14px; 
    color: #808080; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    top: 20px; 
    right: 5px; 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
} 

.menu-close:hover { 
    color: #ffffff; 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
} 

/* Push the body after clicking the menu button */ 
.body-push { 
    overflow-x: hidden; 
    position: relative; 
    left: 0; 
} 

.body-push-toright { 
    left: 200px; 
} 

.body-push-toleft { 
    left: -200px; 
} 

.menu, 
.body-push { 
    -webkit-transition: all .3s ease; 
     -moz-transition: all .3s ease; 
     -ms-transition: all .3s ease; 
     -o-transition: all .3s ease; 
      transition: all .3s ease; 
} 

#menuToggle { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    z-index: 11; 
    display: block; 
    text-align: center; 
    font-size: 14px; 
    color: #ffffff; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    cursor: pointer; 
    background: rgba(0,0,0,0.25); 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
} 

#menuToggle:hover { 
    color: #ffffff; 
    background: rgba(0,0,0,0.2); 
    -webkit-transition: all .1s ease-in-out; 
     -moz-transition: all .1s ease-in-out; 
     -ms-transition: all .1s ease-in-out; 
     -o-transition: all .1s ease-in-out; 
      transition: all .1s ease-in-out; 
}

Javascript:

// Menu settings 
    $('#menuToggle, .menu-close').on('click', function(){ 
     $('#menuToggle').toggleClass('active'); 
     $('body').toggleClass('body-push-toleft'); 
     $('#theMenu').toggleClass('menu-open'); 
    }); 

    // Scrollable menu on small devices 
    $(window).bind("load resize", function(){ 
     if($(window).height() < 400){ 
      $(".menu").css("overflow-y","scroll"); 
     } 
     else { 
      $(".menu").css("overflow-y","hidden"); 
     } 
    });

источник

2013-09-29 ThatGuyThere

Я рекомендовал бы читать это: http://www.sitepoint.com/css3-sliding-menu/

Если статья TL; DR затем использовать

/* Revealing 3D Menu CSS */ 
body 
{ 
    font-family: sans-serif; 
    font-size: 100%; 
    padding: 0; 
    margin: 0; 
    color: #333; 
    background-color: #221; 
} 

/* main page */ 
article 
{ 
    position: fixed; 
    width: 70%; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    padding: 30px 15%; 
    background-color: #fff; 
    overflow: auto; 
    z-index: 0; 
    -webkit-transform-origin: 0 50%; 
    -moz-transform-origin: 0 50%; 
    -ms-transform-origin: 0 50%; 
    -o-transform-origin: 0 50%; 
    transform-origin: 0 50%; 
} 


article:after 
{ 
    position: absolute; 
    content: ' '; 
    left: 100%; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    pointer-events: none; 
} 

/* navigation */ 
nav 
{ 
    position: fixed; 
    left: -16em; 
    top: 0; 
    bottom: 0; 
    background-color: #654; 
    border-right: 50px solid #765; 
    box-shadow: 4px 0 5px rgba(0,0,0,0.2); 
    z-index: 1; 
    cursor: pointer; 
} 

nav:after 
{ 
    position: absolute; 
    content: ' '; 
    width: 0; 
    height: 0; 
    right: -70px; 
    top: 50%; 
    border-width: 15px 10px; 
    border-style: solid; 
    border-color: transparent transparent transparent #765; 
} 

nav ul 
{ 
    width: 14em; 
    list-style-type: none; 
    margin: 0; 
    padding: 1em; 
} 

nav a:link, nav a:visited 
{ 
    display: block; 
    width: 100%; 
    font-weight: bold; 
    line-height: 2.5em; 
    text-indent: 10px; 
    text-decoration: none; 
    color: #ffc; 
    border-radius: 4px; 
    outline: 0 none; 
} 

nav a:hover, nav a:focus 
{ 
    color: #fff; 
    background-color: #543; 
    text-shadow: 0 0 4px #fff; 
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); 
} 

/* hovering */ 
article, article:after, nav, nav * 
{ 
    -webkit-transition: all 600ms ease; 
    -moz-transition: all 600ms ease; 
    -ms-transition: all 600ms ease; 
    -o-transition: all 600ms ease; 
    transition: all 600ms ease; 
} 

nav:hover 
{ 
    left: 0; 
} 

nav:hover ~ article 
{ 
    -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg); 
    -moz-transform: translateX(16em) perspective(600px) rotateY(10deg); 
    -ms-transform: translateX(16em) perspective(600px) rotateY(10deg); 
    -o-transform: translateX(16em) perspective(600px) rotateY(10deg); 
    transform: translateX(16em) perspective(600px) rotateY(10deg); 
} 

nav:hover ~ article:after 
{ 
    left: 60%; 
}

Это может быть использовано для создания 3D-скользящее меню, как показано here

источник

2013-09-29 05:50:29 Domecraft

Я ищу больше для меню используется на таких сайтах, как Squarespace .com – ThatGuyThere

IDK, возможно, вы можете отредактировать CSS, который я предоставил, чтобы он не перемещался по оси Z, а затем просто добавлял его. Это было бы немного круто, добавляя меню сбоку, когда вы наводите на него курсор. Но это только мое мнение. – Domecraft

Интересно ... Я посмотрю, что я могу сделать. – ThatGuyThere

Создание скользящего меню с помощью css

ответ

Смежные вопросы