Cara Membuat Tab Menu Vertikal

Ada seorang teman saya bertanya kepada saya, Bagaimana cara membuat tab menu vertikal?
Ok... sekarang saya akan menjawab pertanyaan itu.

cara membuat menu vertikal

1. ketik kode dibawah ini :

<style type="text/css">
#menu4 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #000;border-size: 1px;border-width: 1px;}
#menu4 ul {list-style: none;margin: 0;padding: 0;}
#menu4 li a {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 80%;font-weight: bold;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu4 li a:link, #menu4 li a:visited {color: #CCC;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98M-UKAOcmydq5I_3J7t4B5OASmcX6dePiD-ruCfXGtFPlYectIrpscWBkQhQpOzsWF8mA1Cm29qro6xjxw8YCHjxqL8Tpwc55i3VUOkEwd6XFx_k0MVfZoxeC0trDv5HXGbeDftG4x8/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98M-UKAOcmydq5I_3J7t4B5OASmcX6dePiD-ruCfXGtFPlYectIrpscWBkQhQpOzsWF8mA1Cm29qro6xjxw8YCHjxqL8Tpwc55i3VUOkEwd6XFx_k0MVfZoxeC0trDv5HXGbeDftG4x8/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>

2. Pergi ke elmen laman => add gadget => HTML/Javascript

3. ketikan kode dibawah :

<div id="menu4">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

4. Save.

Artikel Terkait

Artikel Terkait

Posted in: Blogging