menulagi. Sebelumnya gue sudah berbagi tutorial membuat lists toc menu! Sekarang berbagi cara membuat menu ala google plus punya :-B Bagi kalian yang sering bermain jejaring web google+, pasti tidak akan asing dengan keberadaan menu navigasi sebelah kiri, yg akan muncul setiap kali kita sorot!
Tidak mirip 100% dengan apa yg tampak pada screenshot :"> Gaya, teknik and hasil jadi bisa dikatakan serupa ;)) Main menu diposisikan diam di kanan pojok dengan tinggi - www.w3schools.com/cssref/pr_gen_content.asp
- developer.mozilla.org/en-US/docs/Web/CSS/content
- www.w3.org/TR/CSS21/generate.html#content
- dev.opera.com/articles/view/css-generated-content-techniques/
#main-navigation {
top: 0px;
left: 0px;
height: 4em;
position: fixed;
max-width: 130px;
overflow: hidden;
background-color: #4b67a1;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation:hover {
height: 100%;
max-width: 200px;
-webkit-box-shadow: 5px 0 10px #999;
box-shadow: 5px 0 10px #999;
}
#main-navigation ul {
padding: 0px;
list-style: none;
}
#main-navigation ul li {
white-space: nowrap;
}
#main-navigation ul li a {
color: #ddd;
width: 100%;
height: 50px;
line-height: 50px;
padding-right: 10px;
display: inline-block;
text-decoration: none;
font: 25px "Times New Roman", Times, serif;
}
#main-navigation ul li a:before {
color: #eee;
width: 55px;
font-size: 30px;
text-align: center;
display: inline-block;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation ul li a:hover {
color: #fff;
background-color: #3b5998;
}
#main-navigation ul li a:hover:before {
color: #f03d25;
}
.entypo-home:before {
content: "\2630";
}
.entypo-1:before {
content: "\2620";
}
.entypo-2:before {
content: "\2117";
}
.entypo-3:before {
content: "\2603";
}
.entypo-4:before {
content: "\263c";
}
.entypo-5:before {
content: "\270c";
}
.entypo-6:before {
content: "\272f";
}
.entypo-mail:before {
content: "\2709";
}
top: 0px;
left: 0px;
height: 4em;
position: fixed;
max-width: 130px;
overflow: hidden;
background-color: #4b67a1;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation:hover {
height: 100%;
max-width: 200px;
-webkit-box-shadow: 5px 0 10px #999;
box-shadow: 5px 0 10px #999;
}
#main-navigation ul {
padding: 0px;
list-style: none;
}
#main-navigation ul li {
white-space: nowrap;
}
#main-navigation ul li a {
color: #ddd;
width: 100%;
height: 50px;
line-height: 50px;
padding-right: 10px;
display: inline-block;
text-decoration: none;
font: 25px "Times New Roman", Times, serif;
}
#main-navigation ul li a:before {
color: #eee;
width: 55px;
font-size: 30px;
text-align: center;
display: inline-block;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation ul li a:hover {
color: #fff;
background-color: #3b5998;
}
#main-navigation ul li a:hover:before {
color: #f03d25;
}
.entypo-home:before {
content: "\2630";
}
.entypo-1:before {
content: "\2620";
}
.entypo-2:before {
content: "\2117";
}
.entypo-3:before {
content: "\2603";
}
.entypo-4:before {
content: "\263c";
}
.entypo-5:before {
content: "\270c";
}
.entypo-6:before {
content: "\272f";
}
.entypo-mail:before {
content: "\2709";
}
Planning HTML
Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/
<div id='main-navigation'>
<ul>
<li><a class='entypo-home' href='#'>Home</a></li>
<li><a class='entypo-1' href='#'>Title 1</a></li>
<li><a class='entypo-2' href='#'>Title 2</a></li>
<li><a class='entypo-3' href='#'>Title 3</a></li>
<li><a class='entypo-4' href='#'>Title 4</a></li>
<li><a class='entypo-5' href='#'>Title 5</a></li>
<li><a class='entypo-6' href='#'>Title 6</a></li>
<li><a class='entypo-mail' href='#'>Title 7</a></li>
</ul>
</div>
Source coded by: codepen.io/joshumax/full/asIfy<ul>
<li><a class='entypo-home' href='#'>Home</a></li>
<li><a class='entypo-1' href='#'>Title 1</a></li>
<li><a class='entypo-2' href='#'>Title 2</a></li>
<li><a class='entypo-3' href='#'>Title 3</a></li>
<li><a class='entypo-4' href='#'>Title 4</a></li>
<li><a class='entypo-5' href='#'>Title 5</a></li>
<li><a class='entypo-6' href='#'>Title 6</a></li>
<li><a class='entypo-mail' href='#'>Title 7</a></li>
</ul>
</div>
Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/
