Home » » Membuat menu Vertikal dengan CSS 3 & jquery

Membuat menu Vertikal dengan CSS 3 & jquery

Posted by Hero Posted on 7:24 AM with 18 comments
Vertikal menu css
Menu merupakan komponen yang sangat penting dalam pembuatan web menurut pendapat saya ^__^. 

Pada tutorial kali ini saya akan memberikan tips untuk membuat menu secara vertikal. 

Contoh menu yang ingin saya buat bisa di lihat gambar disamping kiri.

Cara membuatnya bisa ikuti langkah-langkah dibawah ini ::

1. Sediakan file-file dibawah ini ::
2. Extract FortAwesome-Font-Awesome-v3.0.2-0-g13d5dd3.zip, setelah di extract buka foldernya copy folder asset di dalam folder docs

folder docs

folder asset
Cukup Copy Folder Assets, taruh di dalam satu folder project kita. Dan jangan Lupa Jquery juga masukan kedalam folder project.

3. Buat index.php, ikuti source code dibawah ini ::

 
   <html>
    <head>
        <link rel="stylesheet" type="text/css" href="menu.css" />
        
        <!-- jQuery -->
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="menu.js"></script>
    </head>

    <body>
        <div id="accordian">
            <ul>
                <li>
                    <h3><span class="icon-dashboard"></span>Dashboard</h3>
                    <ul>
                        <li><a href="#">Reports</a></li>
                        <li><a href="#">Search</a></li>
                        <li><a href="#">Graphs</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
                <!-- we will keep this LI open by default -->
                <li class="active">
                    <h3><span class="icon-tasks"></span>Tasks</h3>
                    <ul>
                        <li><a href="#">Today's tasks</a></li>
                        <li><a href="#">Urgent</a></li>
                        <li><a href="#">Overdues</a></li>
                        <li><a href="#">Recurring</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <h3><span class="icon-calendar"></span>Calendar</h3>
                    <ul>
                        <li><a href="#">Current Month</a></li>
                        <li><a href="#">Current Week</a></li>
                        <li><a href="#">Previous Month</a></li>
                        <li><a href="#">Previous Week</a></li>
                        <li><a href="#">Next Month</a></li>
                        <li><a href="#">Next Week</a></li>
                        <li><a href="#">Team Calendar</a></li>
                        <li><a href="#">Private Calendar</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <h3><span class="icon-heart"></span>Favourites</h3>
                    <ul>
                        <li><a href="#">Global favs</a></li>
                        <li><a href="#">My favs</a></li>
                        <li><a href="#">Team favs</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

4. Buat menu.css tuliskan seperti dibawah ini ::

 
   /*custom font for text*/

@import url(assets/css/font-awesome.css);
/*Basic reset*/
* {margin: 0; padding: 0;}

body {
 background: #4EB889;
 font-family: Nunito, arial, verdana;
}
#accordian {
 background: #004050;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #003040; 
 background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
 font-size: 16px;
 margin-right: 10px;
}
/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 11px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #003545;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}

5. yang terakhir buat menu.js ::

 
/*jQuery time*/
$(document).ready(function(){
 $("#accordian h3").click(function(){
  //slide up all the link lists
  $("#accordian ul ul").slideUp();
  //slide down the link list below the h3 clicked - only if its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})


6. Selesai. Untuk mejalankannya panggil dengan menggunakan localhost, jangan diklik index.php nya 2x. Dan seperti saya bilang sebelumnya kalian harus memasukan semuanya dalam satu project seperti gambar dibawah ini ::

prject menu vertikal
Semoga tutorial ini bermanfaat buat kalian


Salam Hangat



Roy Purbo



    Labels:

    18 comments:

    1. Aris KrisnaJuly 2, 2014 at 12:34 AM

      makasih banyak gan, membantu buat newbie kaya ane. good post !!

      ReplyDelete
    2. UnknownMay 24, 2017 at 3:56 PM

      mantapz gan artikelnya...

      My blog

      ReplyDelete
    3. Boatt WNNovember 30, 2017 at 11:47 AM

      css3 good work in html5.

      m8bet
      รับแทงบอล
      sbobet mobile
      holiday palace
      ทางเข้า sbobet

      ReplyDelete
    4. sahmonJanuary 14, 2018 at 2:00 PM

      This blog provides a lot of knowledge.


      goldenslot


      goldenslot


      goldenslot

      ReplyDelete
    5. Mozmee007January 22, 2018 at 12:29 PM

      Thank you for the information. I know it.



      ทางเข้า maxbet
      m8bet
      m8bet

      ReplyDelete
    6. AnonymousJanuary 23, 2018 at 1:22 PM

      I appreciate for your work. Thank you very much for your information, nice job

      สมัคร maxbet

      บาคาร่า

      บาคาร่าออนไลน์

      ReplyDelete
    7. UnknownMarch 21, 2018 at 5:15 PM

      Very good thank.
      goldenslot

      ReplyDelete
    8. thanidaNovember 22, 2018 at 12:02 PM

      it was not of much help to me. reason based on it not working the way i wanted.
      ufabet

      ReplyDelete
    9. Mellysa ingDecember 16, 2018 at 8:02 AM

      Whats Going down i am new to this, I stumbled upon this I’ve discovered It positively useful and it has helped me out loads. I am hoping to contribute & assist different customers like its helped me. Great job.
      Situs Togel Online

      ReplyDelete
    10. Mellysa ingDecember 17, 2018 at 7:56 AM

      It weighs about 2/3 as much, and is noticeably smaller in width and height, while being just a hair thicker.
      Situs togel Terpercaya

      ReplyDelete
    11. supersonic100g9April 25, 2019 at 10:14 AM

      เช่ารถเก๋ง ทาง BANANA rent-a-car เรามีบริการเช่ารถเก๋งทั้งแบบ เช่าขับเอง และ เช่าพร้อมคนขับ รถยนต์ที่เราให้บริการนั้น เป็นรถยนต์ที่มีคุณภาพ สะอาด ปลอดภัย รถยนต์ทุกคันได้รับการดูแล ผ่านการบำรุงรักษาตามระยะอย่างดี อีกทั้งเรามีประกันภัยชั้น 1 ที่มาพร้อมกับเช่ารถเก๋งทุกคัน คุณจึงมั่นใจได้ในทุกการขับขี่ ในด้านการบริการหลังการขาย หากรถเช่าของเรามีปัญหาหรือขัดข้องระหว่างการใช้งาน เรามีบริการ Call center 24 ชั่วโมง ทำให้คุณมั่นใจได้ว่าตลอดการเช่านั้น เราจะไม่ละทิ้งลูกค้าอย่างแน่นอน และจุดเด่นที่สำคัญของเรา คือ ไม่มีบัตรเครดิตก็สามารถเช่ารถได้ จึงทำให้เรามีฐานลูกค้าอยู่มากกว่า 40,000 คน และด้วยการบริการที่ได้มาตรฐานของเรา ทำให้ลูกค้ามีความเชื่อมั่นที่จะกลับมาใช้บริการซ้ำเป็นครั้งที่ 2
      เช่ารถ
      เช่ารถกรุงเทพ
      เช่ารถราคาถูก
      เช่ารถรายเดือน
      เช่ารถขับเอง

      ReplyDelete
    12. PornhubOctober 29, 2019 at 11:34 AM

      great bet365 ไทย

      ReplyDelete
    13. Mr aLNovember 18, 2019 at 6:07 PM

      Daftar Duniacash
      Link Alternatif Betplace88
      Duniacash

      Freebet Tanpa Deposit
      Freebet Tanpa Deposit

      Panenpoker
      Situs Dewa Poker88

      Situs Jasabola
      Agen Judi Bola88

      Poker Online Indonesia

      ReplyDelete
    14. edok69March 4, 2020 at 2:58 PM

      Thank you for the good story. You can follow me here

      manop4.uzblog.net

      ReplyDelete
    15. OctopussyMarch 29, 2020 at 4:48 AM

      Thanks for sharing. แทงบอลออนไลน์
      แทงบอลออนไลน์
      แทงบอลออนไลน์
      แทงบอลออนไลน์

      ReplyDelete
    16. OctopussyMarch 29, 2020 at 4:48 AM

      Cool post. แทงบอลออนไลน์
      แทงบอลออนไลน์
      แทงบอลออนไลน์

      ReplyDelete
    17. LigautamaApril 6, 2020 at 7:33 AM

      You Have Nice Contents
      "Come to my website to view the contents of my website"
      LIGA IDOLA - SITUS MAIN GAME ONLINE TERBESAR DI INDONESIA HANYA DENGAN 1 USER ID SUDAH BISA BERMAIN SEMUA GAME. Join US ! klik link di bawah ini ?

      DAFTAR DISINI ---> WWW.LIGAIDOLA88.COM <---

      --> JUDI ONLINE
      --> DEPOSIT PULSA
      --> PREDIKSI PARLAY JITU
      --> EVENT PARLAY


      Untuk Info Dan Bonus Menariknya Bisa Hubungi Kami Di Bawah Ini :
      WHATSAPP 1 : +62 813-6131-2117

      DAFTAR DISINI : BANDARBOLA

      Ayo buruann , mana tau kamu menjadi jutawan setelah bergabung dengan kami ..
      --> Group FB PREDIKSI PARLAY MANIA LIGA IDOLA https://www.facebook.com/groups/ligaidola/
      --> Instagram = https://www.instagram.com/csligaidola/

      ReplyDelete
    18. GodnessApril 12, 2020 at 2:50 AM

      You've just mastered that!!! Gamers Studio | Blog

      ReplyDelete