Creating a Google Like RedBlack Navigation Bar Without Any Image/JavaScript-白红宇

Creating a Google Like RedBlack Navigation Bar Without Any Image/JavaScript

阅读量：5049 次

发布时间：2019-06-12

本文共 5481 字，大约阅读时间需要 18 分钟。

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)

                         
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

                         
<
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

转载于:https://www.cnblogs.com/yqskj/archive/2013/05/17/3084600.html

你可能感兴趣的文章