◄ Min  Size Fonts: + | - | ± Color: Max ►

Membuat Navigasi Menu Ala Google Plus

Apa hendak di kata mau tak gelem tema kali ini akan berbicara tentang tema menu lagi. 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 , 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 height: 4em; Perlu digarisbawahi, menu ini menggunakan trick CSS content
  • 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";
}
Planning HTML
<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
Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/
Loading...
XMembuat Navigasi Menu Ala Google Plus
Membuat menu navigasi ala menu yang ada di google plus
Subscribe my posts Register For Free!

10 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE