Upside Down Circle

Web designers, welcome to the Upside Down Circle, which you will not want to leave!

bubble-menu-navigation

Bubble Menu. Powerful HTML5 & CSS3 Responsive Navigation.

Thanks to the magic of HTML5 and CSS3 techniques, we are able to create and offer you, free to download, powerful website navigation. Bubble menu is responsive; and in package with the navigation, you also get PSD files. Before moving on to designing of navigation, we will put in place HTML structure. We set up the structure simply and as usual.

In Coding by - January 5, 2014 - 4 Comments

view demodownload source

Step 1 – Setting up the structure of the navigation

<div id="menu">
<ul>
	<li class="green"><a href="index.html">Home</a></li>
	<li class="dark-blue"><a href="#">About</a></li>
	<li class="charcoal"><a href="#">Work</a></li>
	<li class="red"><a href="#">Blog</a></li>
	<li class="orange"><a href="#">Social</a></li>
	<li class="carmine"><a href="#">Contact</a></li>
</ul>
</div>

By copying this code in your website, you have successfully set up the navigation structure. What follows now is the second step, which is the last step in creating the bubble navigation.

As a part of this step, we will show you how to design, on the example <li class=”green”></li>. You can find the design of the complete navigation in the .zip folder, in the style.css file, after downloading the free bubble navigation.

Step 2 – Designing navigation

#menu {
width: 100%;
height: 200px;
font-family: 'Average Sans', sans-serif;
}

#menu ul {
width: 100%;
float: left;
margin-top: 20px;
height: 200px;
}

#menu ul.home-menu {
margin-bottom: 0;
float: left;
height: 200px;
}

#menu li {
float: left;
list-style: none;
width: 150px;
height: 200px;

}

#menu li a {
width: 100px;
height: 106px;
font-size: 16px;
line-height: 46px;
text-transform: uppercase;
color: #444444;
text-align: center;
float: left;
text-decoration: none;
margin-right: 5px;
padding: 30px 30px 6px;
-moz-transition-duration: .3s;
-webkit-transition-duration: .3s;
opacity: 0.8;
}

a.current-page {
margin-left: -1px;
}

#menu li a:hover {
padding-top: 22px;
padding-bottom: 22px;
border-radius: 500px;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
margin-top: -20px;
color:#f9f9f9;
font-size: 16px;
opacity: 1.0;
}

/* GREEN */

li.green a {
font-family: 'Orienta', sans-serif;
width: 100px;
height: 106px;
background: transparent url(../img/bubble-green.png) center center no-repeat;
font-size: 16px;
line-height: 30px;
text-transform: uppercase;
text-align: center;
float: left;
text-decoration: none;
margin-right: 5px;
padding: 30px 30px 6px;
-moz-transition-duration: .3s;
-webkit-transition-duration: .3s;
opacity: 0.8;
}

li.green a:hover {
padding-top: 22px;
padding-bottom: 22px;
border-radius: 500px;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
margin-top: -20px;
font-size: 16px;
opacity: 1.0;
background: transparent url(../img/bubbles-green.png) bottom center no-repeat;
}

As you can see, we firstly defined the length of the menu, the length of certain <li> tags, after which we assigned a certain class to <li> tag. Every class has the same design, except for one – class background.

In this way, we have successfully created navigation, by using only HTML and CSS techniques. Although, it might seem that the work of this menu is supported by jQuery, this is not the case.

Step 3 – Customizing the look of navigation on iPads, tablets, and mobile phones

What follows is merely playing with the dimensions of certain <li></li> tags, and the small modulation of background of every <li></li>tag. Below, we will show how to do the magic of the responsive navigation design, and of course – all classes are neatly designed within style.css, which you can see for yourself, after downloading the bubble menu .zip file.

Of course, to customize the appearance of the navigation, we used well-known “@media only screen”.


/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

We hope that the bubble navigation will be helpful to you in some of your future projects (either in full or as an inspiration for your own navigation). Download free bubble navigation, continue to follow Upside Down Circle magazine for web design and designers, and recommend us to your friends. If you have any questions, remarks and/or suggestions, please send them via comment form below the article.

CREDITS:
Subtle Patterns

view demodownload source

Mirza Hodzic
Mirza Hodzic, is a 25 year old founder and administrator of Upside Down Circle. He holds a bachelor's degree in Information Technology and his passion is the development of best quality websites, both visually and functionally. Through 7 years of work in web development he realized that on the internet many overcharge for their services; thus, he decided to take the matter into his own hands and share with you many professional materials, including websites (templates) and everything related to them, completely free of charge.
  • Cheap Wordpress Design

    Ahaa, its fastidious conversation concerning this piece of writing here at this webpage,
    I have read all that, so at this time me also commenting here.

    1
  • Stefan

    Simply dеsire to ѕay your article is as astoundiոg. The clarity in your post is just spectacular
    and і can assume you are an exрert on this subject.
    Well with your permission allow me to grab ƴour feed to keep up to date with forthcoming post.
    Thanks a million and please сontinue the gratifying work.

    2
  • Osvaldo

    Hello there! Quick question that’s completely off topic.
    Do you know how to make your site mobile friendly?

    My weblog looks weird when viewing from my iphone4. I’m trying to find a theme or plugin that might be able to correct this problem.
    If you have any recommendations, please share. With thanks!

    3

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>