Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create glossy vertical navigation in HTML and CSS

In this article we will see how to create an attractive vertical navigation making use of HTML and CSS. This is done without the use of images.

Here we will display a circle that will be having an icon in the center and when you hover over the circle, it will be expanded and a short description will be displayed. Displaying an icon without the images is a very trickier task. The pictos font makes this look very simple which unfortunately is not free however one can make use of likeiconic, which you can use for free.

Let us start building Vertical Navigation

We will begin making use of HTML where one is required to paste the below code into your document.

Listing 1: Introducing HTML to build Vertical Navigation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Vertical Navigation</title>
    <link rel="stylesheet" type="text/css" href="reset.css"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
</body> 
</html>

It can be noticed that we are making use of new html5 doctype here where in both the html and the meta charset tags have been simplified vastly in the new doctype.

One can combine both stylesheets into one, however it is recommended to have two separate documents. For the developers making use of the two, one needs to be certain that reset is listed first. This is required in order to get your normal stylesheet overwrite the default values that is specified in the reset.

The next step is to add the below code.

Listing 2: Adding the below code to the above one

<div id=”nav”>
    <a href="#" class="active"><span class="pictos">p</span><span class="hidden">Home Page</span></a>
    <a href="#"><span class="pictos">i</span><span class="hidden">About Me</span></a>
    <a href="#"><span class="pictos">o</span><span class="hidden">Projects</span></a>
    <a href="#"><span class="pictos">M</span><span class="hidden">Drop a line</span></a>
</div>

Let us open a div with the id nav, and then place four links inside and inside each link, we have a span with the class pictos and a span with the class hidden where in inside the pictos span, we have a letter. Each of these letters and some symbols are equivalent to an icon in the pictos web font. You will not find the hidden span actually hidden rather it will have a large left margin, which hides it, for the reason that overflow will be set to hidden and then inside that span, one can add a short description of the icon displayed. It needs to be making certain that first link has the class of active. This means that it’s wider than the others thereby it displays the description.

Let us making use of CSS now where in the first step will be to create a short reset sheet. This is required in order to make sure that all default values the browser has set back to 0.

Listing 3: Introducing CSS to build Vertical Navigation

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
} 
table {
        border-collapse:collapse;
        border-spacing:0;
}	 
fieldset,img { 
        border:0;
} 
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
} 
ol,ul {
        list-style:none;
} 
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}	 
q:before,q:after {
    content:'';
} 
abbr,acronym {
    border:0;
}

Now we will go ahead and style the entire document. This is done by incorporating 10px of padding and a background color of#d1eaf9.

Listing 4: Styling the entire document

body {
    background: #d1eaf9;
    padding: 10px;
}

It’s time now to ‘import’ the pictos font into the document. This is done by making use of @font-face. The good thing is that the pictos font comes with the necessary files and code else we would have to make use of the FontSquirrel @font-face generator.

Listing 5: importing the pictos font into the document

@font-face { 
    font-family: 'Pictos';
    src: url('font/pictos-web.eot');
    src: local('☺'), url('font/pictos-web.woff') format('woff'), url('font/pictos-web.ttf') format('truetype'), url('font/pictos-web.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

We will now do the real styling of the navigation:

Listing 6: Code illustrating the real style of navigation

#nav a {
    display: block;
    font-style: normal;
    font-family: 'Pictos';
    font-size: 20px;
    padding: 2px 20px 38px 20px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a324a), to(#08283b));
    width: 20px;
    text-decoration: none;
	    overflow: hidden;
	    text-shadow: 0 -1px 1px black;
	    border-radius: 50px;
	    color: white;
	    height: 20px;
	    margin-bottom: 10px;
	    border: 5px solid #146595;
	    -webkit-transition: all ease-in-out .3s;
	    -webkit-background-clip: padding-box;
	}

In order to add width, height etc., it is required to change the way the link displays to block.

One needs to change the font-family to Pictos, and the font-size to 20px however, due to somereason, the pictos font has weird top-padding. This means that the top-padding on the link is less than the bottom padding.

Make sure you remove any text-decoration. More important than this, you need change the overflow to hidden that hides the span with the description. Add a black text-shadow, a border-radius of 50px and a solid border of #146595 and then in order to ease the width-increase, one can change the -webkit-transition to all ease-in-out .3s.

Now we will style the span.hidden:

Listing 7: Styling the span.hidden

#nav a span.hidden {
    font-family: 'Lucida Grande';
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
    margin-left: 40px;
}

Here in set the font-family to Lucida Grande. Also one can make use of any nice-looking typeface you like. In order to make everything look perfect, 12px looks a lot better and same is the case with font-weight: bold. The pictos font and the description are not aligned correctly. This is the reason we’ll add a 2px margin-top then in order to hide the description from view, add a 40px left margin.

It is required to display the description when the user hovers over the button. This means that we change the width to 200px.

Listing 8: Displaying description on hovering over the button

#nav a:hover, #nav a.active {
    width: 200px;
}
#nav a:active {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#08283b), to(#0a324a));
    -webkit-box-shadow: inset 0 0 2px #222;
}

In the end, we’ll rotate the background gradient by 180 degrees in its active state, and then add a box shadow of 2px with the color #222222.

Conclusion

We learned today the process to come up with an attractive vertical navigation in the web applications that made use of CSS and HTML.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login