Ajax Loader
×

New cool Black Dark Sliding Navigation Menu for Blogger

New cool Black Dark Sliding Navigation Menu for Blogger

HTML 
<nav id='main-nav'>
1
<nav id='main-nav'>
2
<div class='container'>
3
<div class='main-menu'><ul class='menu' id='menu-main'>
4
<li><a href='#'>Home</a></li>
5
<li><a href='#'>Post Head Modes</a>
6
<ul class='sub-menu'>
7
 <li><a href='#'>Post With Featured Image</a></li>
8
 <li><a href='#'>Post With Slider</a></li>
9
 <li><a href='#'>Post with SoundCloud</a></li>
10
 <li><a href='#'>Post With Video</a></li>
11
</ul>
12
</li>
13
 <li><a href='#'>Shortcodes</a>
14
<ul class='sub-menu'>
15
 <li><a href='#'>Text and Lists</a></li>
16
 <li><a href='#'>Video and Audio</a></li>
17
 <li><a href='#'>Social</a></li>
18
 <li><a href='#'>Tabs &amp; Toggles &amp; Author</a></li>
19
</ul>
20
</li>
21
 <li><a href='#'>Page Templates</a>
22
<ul class='sub-menu'>
23
 <li><a href='#'>Authors</a></li>
24
 <li><a href='#'>Sitemap</a></li>
25
 <li><a href='#'>Tags</a></li>
26
 <li><a href='#'>Timeline</a></li>
27
</ul>
28
</li>
29
 <li><a href='#'>Categories</a>
30
<ul class='sub-menu'>
31
 <li><a href='#'>World</a></li>
32
 <li><a href='#'>Technology</a></li>
33
 <li><a href='#'>Sports</a></li>
34
</ul>
35
</li>
36
 <li><a href='#'>Post Layout</a>
37
<ul class='sub-menu'>
38
 <li><a href='#'>Full Width</a></li>
39
 <li><a href='#'>Right Sidebar</a></li>
40
 <li><a href='#'>Left SIdebar</a></li>
41
</ul>
42
</li>
43
<li><a href='#'>Reviews</a>
44
<ul class='sub-menu'>
45
 <li><a href='#'>Stars</a></li>
46
 <li><a href='#'>Points</a></li>
47
 <li><a href='#'>Percent</a></li>
48
 <li><a href='#'>in The Top</a></li>
49
</ul>
50
</li>
51
</ul></div>
52
</div>
53
</nav>
54
 
 
CSS 
#main-nav {
1
#main-nav {
2
 background:#2c2c2c;
3
 margin:0 auto;
4
 height:50px;
5
 border-bottom:5px solid #cd2122;
6
}
7
 #main-nav .menu-alert{
8
 float:left;
9
 padding:18px 0 0 10px ;
10
 font-style:italic;
11
 color:#FFF;
12
 }
13
 #top-menu-mob , #main-menu-mob{ display:none; }
14
 #main-nav ul li {
15
 text-transform: uppercase;
16
 font-family: Oswald,arial,Georgia, serif;
17
 font-size:16px;
18
 position: relative;
19
 display: inline-block;
20
 float: left;
21
 border:1px solid #222222;
22
 border-width:0 0 0 1px;
23
 height:50px;
24
 }
25
 #main-nav ul li:first-child,
26
 #main-nav ul li:first-child a{border:0 none;}
27
 #main-nav ul li:last-child a{border-right:0 none;}
28
 #main-nav ul li a {
29
 display: inline-block;
30
 height: 50px;
31
 line-height: 50px;
32
 color: #ddd;
33
 padding:0 14px;
34
 text-shadow:0 1px 1px #000;
35
 border-left:1px solid #383838;
36
  text-decoration:none;
37
 }
38
 #main-nav ul li a .sub-indicator{}
39
 #main-nav ul li a:hover {}
40
 #main-nav ul ul{
41
 display: none;
42
 padding:0;
43
 position: absolute;
44
 top: 50px;
45
 width: 180px;
46
 z-index: 99999;
47
 float: left;
48
 background: #2d2d2d !important;
49
 -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
50
 box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
51
 -webkit-border-bottom-right-radius: 3px;
52
 -webkit-border-bottom-left-radius: 3px;
53
 -moz-border-radius-bottomright: 3px;
54
 -moz-border-radius-bottomleft: 3px;
55
 border-bottom-right-radius: 3px;
56
 border-bottom-left-radius: 3px;
57
 }
58
 #main-nav ul ul li, #main-nav ul ul li:first-child {
59
 background: none !important;
60
 z-index: 99999;
61
 min-width: 180px;
62
 border:0 none;
63
 border-bottom: 1px solid #222;
64
 border-top: 1px solid #383838;
65
 font-size:13px;
66
 height:auto;
67
 margin:0;
68
 }
69
 #main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
70
 #main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
71
 #main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
72
 #main-nav ul.sub-menu a ,
73
 #main-nav ul ul li.current-menu-item a,
74
 #main-nav ul ul li.current-menu-parent a,
75
 #main-nav ul ul li.current-page-ancestor a{
76
 border:0 none;
77
 background: none !important;
78
 height: auto !important;
79
 line-height: 1em;
80
 padding: 10px 10px;
81
 width: 160px;
82
 display: block !important;
83
 margin-right: 0 !important;
84
 z-index: 99999;
85
 color: #ccc !important;
86
 text-shadow:0 1px 1px #000 !important;
87
 }
88
 #main-nav ul li.current-menu-item ul a,
89
 #main-nav ul li.current-menu-parent ul a,
90
 #main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
91
 
92
 #main-nav ul li:hover > a, #main-nav ul :hover > a { color: #FFF ;}
93
 #main-nav ul ul li:hover > a,
94
 #main-nav ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
95
 #main-nav ul li:hover > ul {display: block;}
96
 #main-nav ul li.current-menu-item,
97
 #main-nav ul li.current-menu-parent,
98
 #main-nav ul li.current-page-ancestor{
99
 margin-top:0;
100
 height:50px;
101
 border-left:0 none !important;
102
 }
103
104
 #main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
105
 #main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
106
 #main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
107
 
108
 #main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
109
 #main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
110
 #main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
111
 background:#cd2122;
112
 text-shadow:0 1px 1px #b43300;
113
 color:#FFF;
114
 height:50px;
115
 line-height:50px;
116
 border-left:0 none !important;
117
 }
118
 #main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
119
 #main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
120
 #main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
121
 #main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
122
 #main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
123
 #main-nav ul li.menu-item-home ul li a,
124
 #main-nav ul ul li.menu-item-home a,
125
 #main-nav ul li.menu-item-home ul li a:hover{
126
 background-color:transparent !important;
127
 text-indent:0;
128
 background-image:none !important;
129
 height:auto !important;
130
 width:auto;
131
 }
132
 #main-menu-mob,#top-menu-mob{
133
 background: #222;
134
 width: 710px;
135
 padding: 5px;
136
 border: 1px solid #000;
137
 color:#DDD;
138
 height: 27px;
139
 margin:13px 0 0 10px;
140
 }
141
 #top-menu-mob{
142
 width: 350px;
143
 margin:2px 0 0 0;
144
 }
145
 #main-nav.fixed-nav{
146
 position:fixed;
147
 top:0;
148
 left:0;
149
 width:100% !important;
150
 z-index:999;
151
 opacity:0.9;
152
 -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
153
 -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
154
 box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
155
 }
156
 
157
.container { margin: 0 auto; width: 1160px; }
158
 
159
 
 

New cool Black Dark Sliding Navigation Menu for Blogger

CSSDeck G+