contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Menu Vertikal dan sub menu dengan CSS

Posted in HTML & CSS Life at 11 Maret 2016 With 0 Comments

Cara Membuat Menu Vertikal dan sub menu vertikal dengan css

Artikel sebelumnya kita sudah membahas tentang Membuat Menu multilevel drop down, dan satu lagi artikel saya sebelumnya kita sudah membuat menu vertikal dengan css dengan CSS,, Pada postingan ini kita akan membahas Cara Membuat Menu Vertikal dan Sub Menu Fly out left dengan CSS .. Dalam tutorial kali ini Merupakan pengembangan dari artikel sebelumnya dalam membuat menu vertikal

Demo Download



OK.. Untuk membuat Menu Vertikal dan sub menu dengan css ini , buka lah text editor anda, dan silahkan copy paste script dibawah ini :

HTML CODE :

<html>
<head>
<meta name="author" content="Suckittrees">
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="shortcut icon" href="http://suckittrees.com/favicon.png">
<link rel="icon" href="http://suckittrees.com/favicon.png">
</head>
<body>
<div id='menu_ver'>
<ul>
   <li><a href='#'><span>Link 1</span></a></li>
   <li><a href='#'><span>Link 2</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Link 3</span></a></li>
   <li><a href='#'><span>Link 4</span></a></li>
</ul>
</div>
</body>
</html>

CSS CODE (menu.css)

 /* Suckittrees.com Flyout CSS menu */
#menu_ver {
    font-weight: 600;
    width: 200px; }
#menu_ver ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu_ver ul li.hover,
#menu_ver ul li:hover { position: relative; z-index: 599; }
#menu_ver ul ul{
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
}
#menu_ver ul li:hover > ul { visibility: visible; }
#menu_ver ul ul { top: 0; left: 100%; }
#menu_ver span, #menu_ver a {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none; }
#menu_ver li { background: #005555; }
#menu_ver li:hover, #menu_ver li.active { background: #5FD367; }
#menu_ver a {
    color: #FFF;
    line-height: 160%;
    padding: 16px 8px 16px 28px;
    width: 164px; }
#menu_ver ul ul li {
    background: #006C6C;
    border-bottom: 1px solid #007171; }
#menu_ver ul ul li:hover { background: #5FD367; }

 Tempatkan 2 file diatas dalam sebuah folder , Untuk kode html, silahkan anda simpan dengan nama index.htm atau apapun itu, sementara untuk file css simpan dengan nama menu.css
, Dan Jalankan dibrowser anda.

Demikianlah artikel Cara membuat menu dan sub menu vertikal dengan CSS ,

Demo Download

Artikel Terkait

Diskusi