Large vertical menu with CSS3 transitions

In this example below you will see how to do a Large vertical menu with CSS3 transitions with some HTML / CSS and Javascript

A large vertical menu with CSS3 transitions (link to tutorial).

Thumbnail
This awesome code was written by stathisg, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stathisg ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Large vertical menu with CSS3 transitions</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="container">
  <nav class="menu-container">
    <ul>
      <li><a href="#">Some cool quote about <strong>home</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/home.jpg" alt="Some cool quote about home" /></li>
      <li><a href="#">Some cool quote about <strong>movies</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/movies.jpg" alt="Some cool quote about movies" /></li>
      <li><a href="#">Some cool quote about <strong>music</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/music.jpg" alt="Some cool quote about music" /></li>
      <li><a href="#">Some cool quote about <strong>games</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/games.jpg" alt="Some cool quote about games" /></li>
      <li><a href="#">Some cool quote about <strong>books</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/books.jpg" alt="Some cool quote about books" /></li>
      <li><a href="#">Some cool quote about <strong>art</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/art.jpg" alt="Some cool quote about art" /></li>
    </ul>
  </nav>
  <article>
    <p>This is a demo of the <a href="http://burnmind.com/tutorials/ccs3-menu-transitions">How to create a large CCS3 menu with transitions</a> tutorial @ <a href="http://burnmind.com/">burnmind.com</a>.</p>
    <p>Try the other two versions: <a href="https://codepen.io/stathisg/details/kihan?preview_height=700">Horizontal</a> &amp; <a href="https://codepen.io/stathisg/details/fvDJs?preview_height=700">Horizontal with opaque text</a>.</p>
    <p>Credits: <a href="http://dribbble.com/shots/472966-Texture-for-Web">texture</a>, icons <a href="http://thenounproject.com/noun/home/#icon-No1662">1</a>, <a href="http://thenounproject.com/noun/movie/#icon-No18142">2</a>, <a href="http://thenounproject.com/noun/music/#icon-No11941">3</a>, <a href="http://thenounproject.com/noun/game/#icon-No8609">4</a>, <a href="http://thenounproject.com/noun/book/#icon-No2574">5</a>, <a href="http://thenounproject.com/noun/art-gallery/#icon-No2416">6</a>.</p>
    <p class="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in massa id orci faucibus laoreet eget sed tortor. Phasellus auctor est a metus faucibus, nec tristique est molestie. Nunc malesuada, erat sed suscipit ornare, elit lorem placerat turpis, vel pellentesque est ligula id nisi. Curabitur feugiat libero auctor bibendum consequat. Pellentesque ut pellentesque velit, sed sodales nunc. Nulla facilisi. Ut nec libero eu nunc suscipit facilisis ut non magna. Fusce ornare vel nibh vel scelerisque. Integer lacus magna, porttitor congue suscipit et, pellentesque sed ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus libero nunc, gravida vitae dictum ut, tincidunt nec sapien. Integer purus metus, malesuada quis bibendum nec, semper quis lorem. Pellentesque et libero vel justo accumsan eleifend. Etiam lorem mauris, convallis at mi eget, convallis placerat orci. Vestibulum luctus laoreet tellus eu gravida. Phasellus lobortis urna vel odio fringilla rhoncus.</p>
    <p class="lorem-ipsum">Nunc dignissim risus lobortis dictum cursus. Proin ornare laoreet gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi tincidunt enim in blandit congue. Phasellus placerat sapien vitae aliquet lobortis. Ut urna erat, commodo at euismod vel, iaculis ac elit. Vivamus mollis nibh rutrum dolor dignissim aliquam. Donec in enim ac purus sollicitudin adipiscing. Maecenas tincidunt, nibh ac tristique rhoncus, turpis sapien aliquam dui, nec sollicitudin diam purus vitae massa. Nulla posuere nisl eget justo ullamcorper sollicitudin. In a fringilla lacus. Nullam suscipit eros eu nulla convallis, a placerat est egestas. Maecenas sit amet velit ac tellus volutpat tincidunt. Ut vitae nisl purus. Curabitur vulputate iaculis ligula, non egestas massa auctor in.</p>
  </article>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/stathisg/large-vertical-menu-with-css3-transitions-mvzdj */
html
{
  background-image: url('http://static.burnmind.com/demos/css3-menu-transitions/images/texture.jpg');
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 2%;
  font-size: 1em;
}

a
{
  color: #0CC5DA;
  text-decoration: none;
}

a:hover
{
  color: #DCE808;
  text-decoration: underline;
}

p
{
  margin: 0 0 1em 0;
  padding: 0;
  line-height: 1.4em;
}

.container
{
  margin: 0 auto;
  width: 960px;
}

article
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  width: 75%;
  margin-top: 7%;
  float: right;
  background-color: #fff;
}

article p.lorem-ipsum
{
  color: #ccc;
}

.menu-container
{
  font-family: Georgia, Times, "Times New Roman", serif;
  width: 13%;
  float: left;
}

.menu-container ul, .menu-container li
{
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.menu-container li
{
  float: left;
  width: 100%;
  margin-top: -3%;
}

.menu-container li img
{
  width: 100%;
}

.menu-container li a
{
  line-height: 1.4em;
  font-size: 1em;
  padding: 10%;
  background-color: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu-container li a:hover
{
  text-decoration: none;
  width: 110%;
  height: 110%;
  margin-top: -5%;
  margin-left: -5%;
  padding: 14%;

  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}

Comments