A Pure CSS off-canvas Menu with 2 Demos

The off-canvas menu using pure CSS

The off-canvas menu is the one that slides and overlaps the main content with the navigation links.

Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS.

This menu type can particularly be useful for mobile websites where a user may navigate easily to the other sections of the website.

A demo of flying CSS menu

The menu uses font-awesome based icons, so the CSS file of that library is included in the <head> section. You may use some other or design your own icons.

As you bring the mouse over the black bar with icons, the menu will open with navigation links in flying manner. Have a look by clicking the image or link below:

See online demo and code

The CSS:

@import url(http://fonts.googleapis.com/css?family=Raleway:500);

body {

  width: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background: #f2f2f3;

  font-family: 'Raleway', sans-serif;

}

body h1 {

  text-align: center;

  margin-top: 35px;

  color: #333333;

  letter-spacing: 1px;

  text-shadow: 1px 1px #f2f2f3, -1px -1px #f2f2f3;

}

 

.css-fly-menu {

  height: 100%;

  position: fixed;

  left: -2em;

  top: 0;

  z-index: 1000;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

  -webkit-perspective: 1000px;

          perspective: 1000px;

}

 

.menu-icon-style {

  position: absolute;

  left: 0;

  top: 0;

  z-index: 990;

  height: 100%;

  background: #262626;

}

.menu-icon-style li {

  border-bottom: 1px solid rgba(0, 0, 0, 0.3);

  list-style-type: none;

}

.menu-icon-style a {

  display: block;

  width: 64px;

  height: 64px;

  line-height: 64px;

  text-align: center;

  font-size: 1.6em;

  color: #999999;

  text-shadow: 0 1px 0 black;

  -webkit-transition: all .5s ease-out;

  transition: all .5s ease-out;

}

.menu-icon-style a:hover {

  color: white;

  -webkit-transform: translateX(10px) scale(1.2);

          transform: translateX(10px) scale(1.2);

}

 

.css-fly-menu:hover .text {

  -webkit-transform: rotateY(0deg);

          transform: rotateY(0deg);

}

 

.text {

  position: absolute;

  left: 63px;

  top: 0;

  z-index: 980;

  height: 100%;

  background: #262626;

  border-right: 1px solid rgba(0, 0, 0, 0.3);

  -webkit-transition: -webkit-transform .24s linear;

  transition: -webkit-transform .24s linear;

  transition: transform .24s linear;

  transition: transform .24s linear, -webkit-transform .24s linear;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  -webkit-transform-origin: left;

          transform-origin: left;

  -webkit-transform: perspective(1000px) rotateY(90deg);

          transform: perspective(1000px) rotateY(90deg);

}

.text li {

  border-bottom: 1px solid rgba(0, 0, 0, 0.3);

}

.text a {

  display: block;

  width: 200px;

  height: 64px;

  line-height: 64px;

  text-indent: 1em;

  font-size: 1.4em;

  text-decoration: none;

  color: #999999;

  text-shadow: 0 1px 0 black;

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

}

.text a:hover {

  color: white;

  -webkit-transform: translateX(-14px);

          transform: translateX(-14px);

}

 

.css-fly-menu:hover .info {

  left: 0;

  opacity: 1;

  -webkit-transition: opacity 0.5s ease-in 0.1s;

  transition: opacity 0.5s ease-in 0.1s;

}

 

.info {

  position: absolute;

  padding-left: 2em;

  bottom: 30px;

  z-index: 999;

  width: 264px;

  color: white;

  text-align: center;

  line-height: 1.6;

  opacity: 0;

}

.info .logo p {

  width: 100px;

  height: 100px;

  margin: 0 auto;

  background: #262626;

  color: #424242;

  opacity: .6;

  overflow: hidden;

  text-align: center;

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

  font-size: 2em;

  text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;

}

.info .logo p:hover {

  opacity: 1;

  color: white;

  text-shadow: -1px -1px #575757, 1px 1px #121212;

}

.info .name {

  font-size: 2em;

  font-weight: bold;

  letter-spacing: 2px;

  color: #424242;

  text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;

}

.info .quote {

  color: #444;

  text-shadow: 1px 1px #121212;

}

.info .social a {

  font-size: 2em;

  color: #333333;

  letter-spacing: .5em;

  text-shadow: 1px 1px #454545, -1px -1px #121212;

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

}

.info .social a:hover {

  color: white;

  text-shadow: -1px -1px #575757, 1px 1px #121212;

}

 

 

@media screen and (max-height: 550px) {

  .info {

    display: none;

  }

}

@media screen and (max-width: 450px) {

  h1 {

    font-size: 7.5vw;

  }

}

The markup:

<h1>A demo of CSS fly-out off-canvas menu</h1>
<div id="nav" class="css-fly-menu">
<div class="menu-icon-style">
<ul>
<li><a title="Home" href="#"><i class="fa fa-home "></i></a></li>
<li><a href="About"><i class="fa fa-search "></i></a></li>
<li><a href="#"><i class="fa fa-edit "></i></a></li>
<li><a href="#"><i class="fa fa-cog"></i></a></li>
<li><a href="#"><i class="fa fa-code"></i></a></li>
<li><a href="#"><i class="fa fa-code"></i></a></li> 

</ul>
</div>
<div class="text">
<ul>
<li><a title="Home" href="https://www.jquery-az.com/">Home</a></li>
<li><a href="https://www.jquery-az.com/?s=" >Search</a>
</li>
<li><a href="https://www.jquery-az.com/contact/" >Contact</a>
</li>
<li><a href="https://www.jquery-az.com/css-tutorials/" >CSS</a>
<li><a href="https://www.jquery-az.com/html-tutorials/" >HTML</a>
<li><a href="https://www.jquery-az.com/jquery-tips/" >jQuery</a>
</li>
</ul>
</div>
<div class="info">
<div class="logo"><p>LOGO</p></div>
<div class="name">Busniess name</div>
<div class="quote">The Slogan of business/company</div>
<div class="social">
<a target="_blank" href="https://twitter.com/tmrDevelops"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>

A demo of the menu with different style

Using the same menu as in the above demo, in this example, I have played with a few CSS properties for different elements of the menu. For example, the background color is changed along with text color and shadow. The transition is changed to linear from the ease value that occurs as you bring the mouse over any item. Have a look:

The CSS in this demo:

@import url(http://fonts.googleapis.com/css?family=Raleway:500);

body {

  width: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background: #f2f2f3;

  font-family: 'Raleway', sans-serif;

}

body h1 {

  text-align: center;

  margin-top: 35px;

  color: #333333;

  letter-spacing: 1px;

  text-shadow: 1px 1px #f2f2f3, -1px -1px #f2f2f3;

}

 

.css-fly-menu {

  height: 100%;

  position: fixed;

  left: -2em;

  top: 0;

  z-index: 1000;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

  -webkit-perspective: 1000px;

          perspective: 1000px;

}

 

.menu-icon-style {

  position: absolute;

  left: 0;

  top: 0;

  z-index: 990;

  height: 100%;

  background: #408080;

}

.menu-icon-style li {

  border-bottom: 1px solid rgba(0, 0, 0, 0.3);

  list-style-type: none;

}

.menu-icon-style a {

  display: block;

  width: 64px;

  height: 64px;

  line-height: 64px;

  text-align: center;

  font-size: 1.6em;

  color: #CB9696;

  text-shadow: 0 1px 0 black;

  -webkit-transition: all .5s ease-out;

  transition: all .5s ease-out;

}

.menu-icon-style a:hover {

  color: white;

  -webkit-transform: translateX(10px) scale(1.2);

          transform: translateX(10px) scale(1.2);

}

 

.css-fly-menu:hover .text {

  -webkit-transform: rotateY(0deg);

          transform: rotateY(0deg);

}

 

.text {

  position: absolute;

  left: 63px;

  top: 0;

  z-index: 980;

  height: 100%;

  background: #A3D1D1;

  border-right: 1px solid rgba(0, 0, 0, 0.3);

  -webkit-transition: -webkit-transform .24s linear;

  transition: -webkit-transform .24s linear;

  transition: transform .24s linear;

  transition: transform .24s linear, -webkit-transform .24s linear;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  -webkit-transform-origin: left;

          transform-origin: left;

  -webkit-transform: perspective(1000px) rotateY(90deg);

          transform: perspective(1000px) rotateY(90deg);

}

.text li {

  border-bottom: 1px solid rgba(0, 0, 0, 0.3);

}

.text a {

  display: block;

  width: 200px;

  height: 64px;

  line-height: 64px;

  text-indent: 1em;

  font-size: 1.4em;

  text-decoration: none;

  color: #408080;

  text-shadow: 2px 1px 0 #800000;

  -webkit-transition: all .5s linear;

  transition: all .5s linear;

}

.text a:hover {

  color: white;

  -webkit-transform: translateY(8px);

          transform: translateY(8px);

}

 

.css-fly-menu:hover .info {

  left: 0;

  opacity: 1;

  -webkit-transition: opacity 0.5s ease-in-out 0.2s;

  transition: opacity 0.5s ease-in-out 0.2s;

}

 

.info {

  position: absolute;

  padding-left: 2em;

  bottom: 30px;

  z-index: 999;

  width: 264px;

  color: white;

  text-align: center;

  line-height: 1.6;

  opacity: 0;

}

.info .logo p {

  width: 100px;

  height: 100px;

  margin: 0 auto;

  background: #408080;

  color: #400000;

  opacity: .6;

  overflow: hidden;

  text-align: center;

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

  font-size: 2em;

  text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;

}

.info .logo p:hover {

  opacity: 1;

  color: white;

  text-shadow: -1px -1px #575757, 1px 1px #121212;

}

.info .name {

  font-size: 2em;

  font-weight: bold;

  letter-spacing: 2px;

  color: #CB9696;

  text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;

}

.info .quote {

  color: #CB9696;

  text-shadow: 1px 1px #121212;

}

.info .social a {

  font-size: 2em;

  color: #333333;

  letter-spacing: .5em;

  text-shadow: 1px 1px #454545, -1px -1px #121212;

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

}

.info .social a:hover {

  color: white;

  text-shadow: -1px -1px #575757, 1px 1px #121212;

}

 

 

@media screen and (max-height: 550px) {

  .info {

    display: none;

  }

}

@media screen and (max-width: 450px) {

  h1 {

    font-size: 7.5vw;

  }

}

The off-canvas menu using pure CSS

A demo of flying CSS menu

See online demo and code

A demo of the menu with different style

Related Tutorials: