Membuat navigasi dengan CSS adalah salah satu elemen paling penting dari desain website.
Pada kesempatan kali ini aku mo share cute vertikal menu.
Contohnya kek gini:
Dan berikut ini CSS & HTML nya:
<div id="extra">
<a href="#">custom link 1</a></div>
<div id="extra">
<a href="#">custom link 2</a></div>
<div id="extra">
<a href="#">custom link 3</a></div>
<div id="extra">
<a href="#">custom link 4</a></div>
<div id="extra">
<a href="#">custom link 5</a></div>
<div id="extra">
<a href="#">custom link 6</a></div>
<style type="text/css">
#extra{ position:relative; text-align:center}
#extra a{ padding:4px; margin-bottom:4px; width:140px; font-family:consolas; font-size:10px; text-transform:uppercase; letter-spacing:1px; display:inline-block; text-align:center; color:#a1b3a4; background-color:#fafaf3; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; border-left:10px solid #e9e2d5; border-right:10px solid #e9e2d5; text-shadow:1px 1px #fff}
#extra a:hover{ width:150px; color:#ce8193; background-color:#f8e1e5; border-left:10px solid #da9baa; border-right:10px solid #da9baa}</style>
Nah, kamu tinggal ganti url nya dengan link tujuan punyamu sendiri. Jangan lupa tinggalin komen ya..
0 Comments:
Posting Komentar