Search for Archive .. Or Search Article

GOOGLE

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.
Related Posts
Sponsor

12 comments :

Do not spam,porn,violence and gore!

  1. iya saya demen banget sama edit html
    nice share

    ReplyDelete
  2. Wah keren Ilhamfiles...!! Makasih atas ilmunya!

    ReplyDelete
  3. wah tambah keren aja nih, tampilan blognya juga makin hari makin bagus aja sob :D

    ReplyDelete
  4. Keren, tapi bingung nih banyak banget yang di edit.
    Jika diijinkan saya bookmark dulu, pelan pelan saya pelajari.
    Makasih berbaginya, sangat bermanfaat bagi saya blogger pemula

    ReplyDelete
  5. Untuk Search Enginenya, klik Edit pada HTML100

    Pada html 100...maksudnya gimana ya ???

    Berminat pada search engine nya saja....krn blg sy dah ada tab menunya

    ReplyDelete
  6. kalau boleh jujur gan, kritik ane pada navbar blog ini. Sebaiknya fungsi tidak dibuat mouse over tetapi dengan mouse click. Kenapa? saat kita menggerakkan mouse tidak sengaja melewati navbar terdapat efek-efek yang (menurut saya) cukup mengganggu,

    oh iya, saya senang dengan tutorialnya, menurut saya masih jarang blogger yang menulis tutorial tentang CSS dan jQuery, akan lebih bagus jika ditampilkan Demo nya ;)

    ReplyDelete
  7. @mba osi : Silahkan contact saya di ym : what_on2012

    @ardianz : terima kasih sob atas masukannya, dan untuk navbar blogger, nanti akan saya siasati dengan opacity....

    ReplyDelete
  8. wah keren banget sob,dapat ilmu baru lagi nih,,makasih ya,

    ReplyDelete