The following one on CSS menu models list is a genuinely basic and successful one. The toggle menu initially as a hamburger icon discharge the components horizontally in a slide pull like fashion.The initial layout looks extraordinary with the toggle button not being available as additional component rather as a piece of image. In any case, on mouse action to the button the background changes to yellow for whole menu. You can upgrade that part by customizing the toggle menu division with few CSS codes.
Libraries
< script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
HTML
<link rel= "stylesheet" href= "style.css" >
<nav class= "menu-opener" >
<div class= "menu-opener-inner" > </div>
</nav>
<nav class= "menu" >
<ul class= "menu-inner" >
<a href= "#" class= "menu-link" >
<li> Accueil</li>
</a>
<a href= "#" class= "menu-link" >
<li> Portfolio</li>
</a>
<a href= "#" class= "menu-link" >
<li> Themes</li>
</a>
<a href= "#" class= "menu-link" >
<li> Templates</li>
</a>
<a href= "#" class= "menu-link" >
<li> Contact</li>
</a>
</ul>
</nav>
<script type= "text/javascript" src= "https://code.jquery.com/jquery-1.9.1.js" > </script>
<script src= "menu-opener.js" > </script>
<link rel="stylesheet" href="style.css">
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>Accueil</li>
</a>
<a href="#" class="menu-link">
<li>Portfolio</li>
</a>
<a href="#" class="menu-link">
<li>Themes</li>
</a>
<a href="#" class="menu-link">
<li>Templates</li>
</a>
<a href="#" class="menu-link">
<li>Contact</li>
</a>
</ul>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="menu-opener.js"></script>
CSS
@import url ( https: //fonts.googleapis .com/css?family= Open+ Sans: 100 , 300 , 400 , 700 ) ;
*,
*:: before ,
*:: after {
-webkit-box-sizing: border-box ;
-moz-box-sizing: border-box ;
box-sizing : border-box ;
}
body {
background : url ( "http://www.philippefercha.com/cd/toggle-menu-bg.jpg" ) no-repeat ;
background-size : 2000px ;
font-family : 'Open Sans' , Helvetica, Arial, sans-serif ;
}
a {
display : block ;
width : 100% ;
height : 100% ;
}
.menu-opener , .menu-opener : hover , .menu-opener .active , .menu-opener-inner , .menu-opener-inner :: before , .menu-opener-inner :: after , .menu , .menu .active {
-webkit-transition: 250ms all;
transition : 250ms all;
}
.menu-opener {
cursor : pointer ;
height : 64px ;
position : absolute ;
top : 2% ;
left : 1% ;
-webkit-user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
user-select: none ;
width : 64px ;
}
.menu-opener : hover , .menu-opener .active {
background : #f1c40f ;
}
.menu-opener-inner {
background : #fff ;
height : .5rem ;
margin-left : .75rem ;
margin-top : 1.75rem ;
width : 2.5rem ;
}
.menu-opener-inner :: before , .menu-opener-inner :: after {
background : white ;
content : '' ;
display : block ;
height : .5rem ;
width : 2.5rem ;
}
.menu-opener-inner :: before {
-webkit-transform: translateY( -0.75rem ) ;
-ms-transform: translateY( -0.75rem ) ;
transform : translateY( -0.75rem ) ;
}
.menu-opener-inner :: after {
-webkit-transform: translateY( 0.25rem ) ;
-ms-transform: translateY( 0.25rem ) ;
transform : translateY( 0.25rem ) ;
}
.menu-opener-inner .active {
background : transparent ;
}
.menu-opener-inner .active :: before {
-webkit-transform: translateY( 0rem ) rotate ( -45deg ) ;
-ms-transform: translateY( 0rem ) rotate ( -45deg ) ;
transform : translateY( 0rem ) rotate ( -45deg ) ;
}
.menu-opener-inner .active :: after {
-webkit-transform: translateY( -0.5rem ) translateX( 0rem ) rotate ( 45deg ) ;
-ms-transform: translateY( -0.5rem ) translateX( 0rem ) rotate ( 45deg ) ;
transform : translateY( -0.5rem ) translateX( 0rem ) rotate ( 45deg ) ;
}
.menu {
background : #f1c40f ;
color : transparent ;
height : 64px ;
position : absolute ;
top : 2% ;
left : 1% ;
-webkit-user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
user-select: none ;
width : 0rem ;
z-index : -1 ;
}
.menu .active {
width : -webkit-calc( 100% - 2rem ) ;
width : calc ( 100% - 2rem ) ;
}
.menu .active .menu-link {
color : white ;
}
.menu-inner {
display : -webkit-box;
display : -webkit-flex;
display : -ms-flexbox;
display : flex;
-webkit-box-orient: horizontal ;
-webkit-box-direction: normal ;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction : row;
height : 100% ;
list-style-type : none ;
margin : 0 ;
margin-left : 4rem ;
padding : 0 ;
}
.menu-link {
color : transparent ;
display : -webkit-box;
display : -webkit-flex;
display : -ms-flexbox;
display : flex;
-webkit-box-flex: 1 ;
-webkit-flex: 1 1 auto ;
-ms-flex: 1 1 auto ;
flex : 1 1 auto ;
font-size : 2rem ;
font-weight : 100 ;
height : 100% ;
text-align : center ;
text-decoration : none ;
}
.menu-link li {
margin : auto ;
}
@media screen and ( max-width : 768px ) {
.menu {
height : auto ;
}
.menu-inner {
display : block ;
}
.menu-link {
padding : 10px 0 ;
font-size : 1.2em ;
}
.menu .active {
width : -webkit-calc( 100% - 0.5rem ) ;
width : calc ( 100% - 0.5rem ) ;
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: url("http://www.philippefercha.com/cd/toggle-menu-bg.jpg") no-repeat;
background-size: 2000px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
a {
display: block;
width: 100%;
height: 100%;
}
.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
-webkit-transition: 250ms all;
transition: 250ms all;
}
.menu-opener {
cursor: pointer;
height: 64px;
position: absolute;
top: 2%;
left: 1%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 64px;
}
.menu-opener:hover, .menu-opener.active {
background: #f1c40f;
}
.menu-opener-inner {
background: #fff;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
}
.menu-opener-inner::before, .menu-opener-inner::after {
background: white;
content: '';
display: block;
height: .5rem;
width: 2.5rem;
}
.menu-opener-inner::before {
-webkit-transform: translateY(-0.75rem);
-ms-transform: translateY(-0.75rem);
transform: translateY(-0.75rem);
}
.menu-opener-inner::after {
-webkit-transform: translateY(0.25rem);
-ms-transform: translateY(0.25rem);
transform: translateY(0.25rem);
}
.menu-opener-inner.active {
background: transparent;
}
.menu-opener-inner.active::before {
-webkit-transform: translateY(0rem) rotate(-45deg);
-ms-transform: translateY(0rem) rotate(-45deg);
transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
-webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
-ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}
.menu {
background: #f1c40f;
color: transparent;
height: 64px;
position: absolute;
top: 2%;
left: 1%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 0rem;
z-index: -1;
}
.menu.active {
width: -webkit-calc(100% - 2rem);
width: calc(100% - 2rem);
}
.menu.active .menu-link {
color: white;
}
.menu-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 100%;
list-style-type: none;
margin: 0;
margin-left: 4rem;
padding: 0;
}
.menu-link {
color: transparent;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 2rem;
font-weight: 100;
height: 100%;
text-align: center;
text-decoration: none;
}
.menu-link li {
margin: auto;
}
@media screen and (max-width: 768px) {
.menu {
height: auto;
}
.menu-inner {
display: block;
}
.menu-link {
padding: 10px 0;
font-size: 1.2em;
}
.menu.active {
width: -webkit-calc(100% - 0.5rem);
width: calc(100% - 0.5rem);
}
}
JS
$( ".menu-opener" ) .click ( function ( ) {
$( ".menu-opener, .menu-opener-inner, .menu" ) .toggleClass ( "active" ) ;
} ) ;
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
See live demo and download source code.
This awesome script developed by Philippe_Fercha . Visit their official repository for more information and follow for future updates.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
VIDEO
Related