So this is my first post on my new Blog, and i am quite exited about it 
, while visiting Google’s homepage, I was wondering about their new Top black navigation bar so I came up with this. If you Google it, you will get plenty of tutorials about creating the new Google like navigation bar but most of them includes JavaScript/Image or both which slow down the loading time.
In this post, I am gonna help you create a Google like black colored Top navigation menu only with CSS
At first, take a look at what we are creating :
Creating google like navigation menu
We’re gonna make it by two steps,
Step 1 : CSS Styling ( See the Comments for CSS details)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
body {margin:0 auto;}/*--navigation wrapper--*/#navwrapper {margin:0 auto;background-color: #2D2D2D;}#nav {font-family: Arial, Helvetica, sans-serif;font-size:12px;padding-top:4px;}#nav, #nav ul {padding: 0;margin: 0;list-style: none;font-family: Arial, Helvetica, sans-serif;}/*--main nav links style--*/#nav a {display:block;padding:7px 7px 7px 7px;color:#ccc;text-decoration:none;}#nav a.dmenu {}#nav a.dmenu:hover {color:#3366CC !important;background-color: #fff !important;}#nav li {float: left;}#nav li {position: relative;}/* hide from IE, mac */#nav li {position: static; width: auto;}/* end hiding from IE5 mac *//*--drop down menu styling--*/#nav li ul {position: absolute;display: none;margin-left:-1px;padding-bottom:10px;background-color: #FFFFFF;border: 1px solid #bbb;border-top:none;-moz-box-shadow: 0 0 5px #ddd;-webkit-box-shadow: 0 0 5px #ddd;box-shadow: 0 0 5px #ddd;/*--make it top of all the elements on page, so that it can be visible--*/z-index:5000;}#nav li:hover a, #nav a:focus,#nav a:active {padding:7px 7px 7px 7px;color:#fff;background:#444;text-decoration:none;}#nav li ul, #nav ul li {width: 10em;}/*--drop down menu styling is different from main nav, strict rule--*/#nav ul li a {color: #3366CC !important;border-right: 0;}#nav ul li a:hover {color:#3366CC !important;background-color: #eef3fb !important;border-right: 0;}/*--the selected, current item in the navigation menu--*/#nav a.current{color:#fff;font-weight:bold;background:#2D2D2D;text-decoration:none;border-top:2px solid #C33;padding-bottom:5px; /*--removing 2px border from 7px padding--*/}#nav a.current:hover{padding-bottom:5px; /*--removing 2px border from 7px padding--*/}#nav li:hover ul {display: block;}#nav li:hover ul a{color: #000000;background-color: transparent;}#nav ul a:hover {background-color: #606060!important;color: #FFFFFF !important;}/*--used in drop down menu items--*/.menuseprator{border-bottom:1px solid #ddd; margin:10px 0 10px 0;}/*--for showing down arrow in drop down menu item--*/.arrowdown{color#eee; font-size:0.5em;}/*--for the left navigation menu--*/.floatleft{float:left;}/*--for the right options navigation menu--*/.floatright{float:right;}/*--clear all floating, left and right--*/.clear{clear:both;} |
Step 2: HTML markup
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<div id="navwrapper"><ul class="floatleft" id="nav"> <li><a href="#">Rabby +</a></li> <li><a class="current" href="#">Web</a></li> <li><a href="#">Images</a></li> <li><a href="#">Video</a></li> <li><a href="#">Maps</a></li> <li><a href="#">Gmail</a></li> <li><a href="#">News</a></li> <li><a class="dmenu" href="#">More <span class="arrowdown">▼</span></a><ul><ul> <li><a href="#">Translate</a></li> <li><a href="#">Books</a></li> <li><a href="#">Schoolar</a></li> <li><a href="#">Blogs</a></li></ul></ul><ul><ul> <li class="menuseprator"></li> <li><a href="#">Youtube</a></li> <li><a href="#">Calender</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Documents</a></li> <li><a href="#">Sites</a></li> <li><a href="#">Groups</a></li></ul></ul><ul> <li class="menuseprator"></li> <li><a href="#">Even More »</a></li></ul></li></ul><ul class="floatright" id="nav"> <li><a href="#">rabbybhuiyan@gmail.com</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Logout</a></li></ul><br class="clear" /></div> |
Voila, Now Copy and paste the HTML code to your HTML file and the CSS to your Style.css file and your are DONE! Cheeck out the live demo Bellow
Works on all browsers except IE6
If you are having any issues with this please Do drop in your Comments , Suggestion and feedback are warmly welcomed
http://thegeekyme.com/creating-a-google-like-redblack-navigation-bar-without-any-imagejavascript