Rolling stone navigational menu with CSS3

This chapter will show you how to create a rolling stone type navigational menu on your web page, and style it with CSS. The main CSS properties used are backgrounds / gradients, transitions, and @font-face.

Example

The example of a rolling stone navigation menu with CSS3:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}
html { 
    height:100%;
    font-family: 'Roboto Condensed'; 
}
body {
    min-height:200px;
    padding:20px 0;
    text-align:center;
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    /* ADD proprietary selectors if needed */
}
p {
    position:absolute;
    left:50px; bottom:20px;
    color:#666;  font-weight:bold; font-size:smaller;
  }
p.p_note {
    position:relative;
    left:0px; bottom:-20px;
  }
* { 
    margin:0; padding:0; 
}
h1 { 
    margin-bottom:50px;
    font-size:1.8em; color:#fff;  
    letter-spacing:-1px; text-transform:capitalize; 
    text-shadow:0 2px 2px rgba(0,0,0,0.6); 
}
ul { 
    display:inline-block; overflow:hidden;
    height:80px; max-width:80%;
    margin:0; padding:0 30px;
    font-size:1.5em; line-height:80px;
    text-align:center;
    background-color:rgba(0,0,0,0.4); 
    border-bottom:1px solid rgba(255,255,255,0.25); border-radius:50%;
    box-shadow:0 0 8px rgba(0,0,0,0.4) inset;  
}
ul > li { 
    float:left; 
    height:100%; 
    margin:0px 0.8em;
    list-style:none;  
}
ul > li > a { 
    display:inline-block; 
    margin-top:-50px; padding-top:50px; 
    color:#fff;
    letter-spacing:-1px; 
    text-decoration:none; text-transform:uppercase; 
    text-shadow:0 -50px #CDF745;
    transition:1.2s cubic-bezier(0.2,0.2,0.2,1.8);
    /* ADD proprietary selectors if needed */
}
ul > li > a:hover { 
    margin-top:0;
}
</style>
</head>

<body>

<h1>BrenkoWeb</h1>

<ul>
    <li><a href="http://www.brenkoweb.com/tutorials/html">CSS</a></li>
    <li><a href="http://www.brenkoweb.com/tutorials/css">HTML</a></li>
    <li><a href="http://www.brenkoweb.com/tutorials/xml">XML</a></li>
    <li><a href="http://www.brenkoweb.com/tutorials/javascript">JS</a></li>
</ul>

<p class="p_note"><strong>NOTE:</strong> This example is not optimized for smaller screens. Try modifying the CSS to achieve that</p>
  
<p>&copy; BrenkoWeb.com tutorials</p>
              
</body>
</html>

›› go to examples ››

Rolling stone navigational menu with CSS3

Example

The example of a rolling stone navigation menu with CSS3:

Comments

About

Contact

Get Connected