Cute CSS Vertical Menus - Ash Princess Kawaii
Breaking News
Loading...
31 Januari 2018

Cute CSS Vertical Menus

Januari 31, 2018

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..image

0 Comments:

Posting Komentar