Multi Level CSS Menu with Simple Search Engine

Hello my friend bloggers, this time I will be posting about someone who sends me a message on the cbox "How do I create a menu slides like I have?".

Yhupz. Let's see how to do it.Previously seen first! like what I've got a slide menus?
Look at the top of this post!

The way to do it:
  1. Go to your blogger account.
  2. Then go to LAYOUT >> Edit HTML don't forget to check list "Expand Widget Template".
  3. And then copy below code:
  4. /*-- (Menu/Nav) --*/
    #nav-element{width:968px;margin:0; padding:0px 0 0px 0; float:center}
    .nav-left{float:left;margin:-1px;padding-left:6px;width:744px}
    .nav-right{float:left;margin:0px;padding:0px 0 0px 0;width:200px}
    #nav{background:#333 url(http://ilhamfiles.webs.com/template/ilhamfilesblogspotcom/topmenubgrhy30.jpg) no-repeat; height:30px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto;position:relative;top:0}
    .jqueryslidemenu{background:#414141;font:bold 12px Verdana;width:100%}
    .jqueryslidemenu ul{list-style-type:none;margin:0;padding:0}
    .jqueryslidemenu ul li{display:inline;float:left;position:relative}
    .jqueryslidemenu ul li a{background:#414141;border-right:1px solid #778;color:#2d2b2b;display:block;padding:8px 10px;text-decoration:none}
    * html .jqueryslidemenu ul li a{display:inline-block}
    .jqueryslidemenu ul li a:link,.jqueryslidemenu ul li a:visited{color:#FFF}
    .jqueryslidemenu ul li a:hover{background:#000;color:#FFF}
    .jqueryslidemenu ul li ul{display:block;left:0;position:absolute;visibility:hidden}
    .jqueryslidemenu ul li ul li{display:list-item;float:right}
    .jqueryslidemenu ul li ul li ul{top:0}
    .jqueryslidemenu ul li ul li a{border-bottom:1px solid gray;border-top-width:0;font:normal 13px Verdana;margin:0;padding:5px;width:160px}
    .jqueryslidemenuz ul li ul li a:hover{background:#eff9ff;color:#000}
    .downarrowclass{position:absolute;right:7px;top:12px}
    .rightarrowclass{position:absolute;right:5px;top:6px}

    Note : For the following code Red . You can edit, but you must see the following #outer-wrapper code of your template.
  5. Then place CSS code in the top ,above this code]]></b:skin>
  6. Setelah itu, untuk menerapkan kode css diatas ke template kita caranya copy dahulu kode html di bawah ini:
    <div id='nav-element'>
    <div id='nav'>
    <div class='nav-left'>
    <b:section class='nav-left' id='nav-left' preferred='yes' showaddelement='no'>
    <b:widget id='HTML99' locked='false' title='' type='HTML'/>
    </b:section>
    </div>
    <div class='nav-right'>
    <b:section class='nav-right' id='nav-right' preferred='yes' showaddelement='no'>
    <b:widget id='HTML100' locked='false' title='' type='HTML'/>
    </b:section>
    </div>
    </div>
    </div>
  7. Then put this HTML code just below this code
    <div id='outer-wrapper'>
  8. The next step is to install the widget with the HTML code below:
    • For Slide Menu, click Edit on the HTML99 :
    • <div id="myslidemenu" class="jqueryslidemenu">
      <ul>
      <li><a href="http:/ilhamfiles.blogspot.com">Item 1</a></li>
      <li><a href="LINK URL DISINI">Item 2</a></li>
      <li><a href="LINK URL DISINI">Folder 1</a>
      <ul>
      <li><a href="LINK URL DISINI">Sub Item 1.1</a></li>
      <li><a href="LINK URL DISINI">Sub Item 1.2</a></li>
      <li><a href="LINK URL DISINI">Sub Item 1.3</a></li>
      <li><a href="LINK URL DISINI">Sub Item 1.4</a></li>
      </ul>
      </li>
      <li><a href="LINK URL DISINI">Item 3</a></li>
      <li><a href="LINK URL DISINI">Folder 2</a>
      <ul>
      <li><a href="LINK URL DISINI">Sub Item 2.1</a></li>
      <li><a href="LINK URL DISINI">Folder 2.1</a>
      <ul>
      <li><a href="LINK URL DISINI">Sub Item 2.1.1</a></li>
      <li><a href="LINK URL DISINI">Sub Item 2.1.2</a></li>
      <li><a href="LINK URL DISINI">Folder 3.1.1</a>
      <ul>
      <li><a href="LINK URL DISINI">Sub Item 3.1.1.1</a></li>
      <li><a href="LINK URL DISINI">Sub Item 3.1.1.2</a></li>
      <li><a href="LINK URL DISINI">Sub Item 3.1.1.3</a></li>
      <li><a href="LINK URL DISINI">Sub Item 3.1.1.4</a></li>
      <li><a href="LINK URL DISINI">Sub Item 3.1.1.5</a></li>
      </ul>
      </li>
      <li><a href="LINK URL DISINI">Sub Item 2.1.4</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li><a href="LINK URL DISINI">Item 4</a></li>
      </ul>
      <br style="clear: left" />
      </div>

    • For Search Engine, click on the HTML 100:
    • <form action="http://ilhamfiles.blogspot.com/search" method="get"><div style="margin-top:3px;float: left;"><input class="textinput" name="q" size="20" type="text" /></div><div style="margin-top:1.8px;float: left; margin-left:5px"><input style="margin-left: 10px;" value="Cari" class="buttonsubmit" name="submit" size="10" type="submit" /></div></form>

  9. Lastly, stay right to the animated menu with copy the code below and save it under the code<head> :
    <script src='http://www.serie3.info/s3slider/style/js/jquery.js' type='text/javascript'/>
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    <script src='http://ilhamfiles.webs.com/template/ilhamfilesblogspotcom/7.js' type='text/javascript'/>
    <script type='text/javascript'>
    arrowimages.down[1]=&quot;http://ilhamfiles.webs.com/images/down.gif&quot;
    arrowimages.right[1]=&quot;http://ilhamfiles.webs.com/images/right.gif&quot;
    </script>
  10. The Click SAVE!
Now Look ... results! Satisfactory or not? If the hack above having problems, please contact me at the column contact us.Good luck, may be useful.

Mengamati apa yang ada dengan sangat jeli