When your website means business.

CSS, Responsive | Type: CSSCSS-only Mobile Menu

Mobile menu that doesn’t use javascript. Uses hidden checkbox to toggle state.


<nav class="mobile-menu">
<label for="show-menu" class="show-menu"><span>Menu</span>
<div class="lines"></div>
<input type="checkbox" id="show-menu">
<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact</a></li>


.mobile-menu { display:block; width:100%; background: #8aa8bd; line-height: 1.6em; font-weight: 400; width:100%; text-align:center; position: relative;  margin:0 auto; }

/*Strip the ul of padding and list styling*/
.mobile-menu ul { list-style-type:none; margin: 0 auto; padding-left:0; text-align:center; width:100%; position: absolute; background: #8aa8bd; }

/*Create a horizontal list with spacing*/
.mobile-menu li { display:inline-block; /*float: left; margin-right: 1px;*/ }

/*Style for menu links*/
.mobile-menu li a { display:block; min-width:140px; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-transform:uppercase; background: #8aa8bd; text-decoration: none; margin-left:-5px;  padding: 10px 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

/*Hover state for top level links*/
.mobile-menu li:hover a { color: #4db3ff; background-color:#ccddee; }

/*Style for dropdown links*/
.mobile-menu li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; }

/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover { color: #4db3ff; }

/*Hide dropdown links until they are needed*/
.mobile-menu li ul { display: none; }

/*Make dropdown links vertical*/
.mobile-menu li ul li { display: block; float: none; }

/*Prevent text wrapping*/
.mobile-menu li ul li a { width: auto; min-width: 100px; padding: 0 20px; }

/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu { text-decoration: none; color: #fff; background: #8aa8bd; text-align: center; padding: 10px 15px; display: none; cursor: pointer; text-transform: uppercase; }

.mobile-menu .show-menu span{ padding-left: 35px; }

/*Hide checkbox*/ 
.mobile-menu input[type=checkbox] { display: none; }

/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked ~ #menu{ display: block; }

/*Responsive Styles*/

@media screen and (max-width : 800px) {
  .mobile-menu .lines { border-bottom: 15px double #f8f8f8; border-top: 5px solid #f8f8f8; content:""; height: 5px; width:20px; padding-right:15px; float: right; }

  /*Make dropdown links appear inline*/
  .mobile-menu ul { position: static; display: none; }

  /*Create vertical spacing*/
  .mobile-menu li { margin-bottom: 1px; }
  /*Make all menu links full width*/
  .mobile-menu ul li, 
  .mobile-menu li a { width: 100%; }

  /*Display 'show menu' link*/
  .mobile-menu .show-menu { display:block; }

Reference Links

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.