Membuat Menu Fixed Bar Dengan Logo Hover
dalam membuat Menu Fixed Bar Dengan Logo Hover " wkwkwk aku tertawa sendiri dengan sambutan kata pada postingan kali ini " super lebaaaaaaayyy .. tapi gak apa-apa hanya sekedar impropisasi saja untuk memberi tahu kalian dalam membuat postingan haruslah dengan suasana yang benar-benar enak biar dapat pahalanya. walah malah ngalor ngidul nih .. mending lihat dulu demonya gih ....
Komposisi
CSS
header {HTML
position: fixed;
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid #e3e3e8;
}
#logo {
float: left;
font-size: 3em;
margin: 0;
padding: .4em;
text-decoration: none;
color: #333;
border-right: 1px solid #e3e3e8;
transition: .5s all;
}
#logo:hover {
color: #fafafa;
background-color: #333;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 2.2em 2em;
}
nav ul li {
display: inline;
padding: 0 .4em;
}
nav ul li a {
color: #333;
text-decoration: none;
text-transform: uppercase;
font-size: 1.6em;
padding-bottom: 1.3em;
transition: .5s color;
}
nav ul li a:hover {
border-bottom: 3px solid #333;
}
#current {
color: #ff4629;
border-bottom: 3px solid #333;
}
#fb:hover {
color: #3b5998;
}
#twitter:hover {
color: #00acee;
}
<header>Saya tidak akan menjelaskan secara detail tentang langkah-langkah dalam menerapkanya tapi lihatlah warna-warna pada kode CSS dan HTML yang harus diperhatikan untuk langkah kreatifitas selanjutnya.
<a id="logo" href="#">Action-Blog</a>
<nav>
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#" id="fb">Facebook</a></li>
<li><a href="#" id="twitter">Twitter</a></li>
</ul>
</nav>
</header>