Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...

Multi-level menu for Simplex Newspaper II

by nhamnga hanh | posted: 10/08/2010 | 13 comments
SimplexBlognews and Simplex Newspaper II are similar templates ,they has the same layout ,so we can make multi-level menu for Simplex Newspaper II as the way we did with Simplex Blognews .




1,Open template in any word editor you have ,or in Blogger (go to Design tab ---> edit HTML ----> checked Expand Widget Templates )

2,find this code

             <ul>
                 <b:section id='topcat' showaddelement='no'>
                     <b:widget id='LinkList1' locked='false' title='Top Category' type='LinkList'>
                         <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.target'><data:link.name/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>           
                 </b:section>           
             </ul>
         
and change it to
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>
Remember to change the text in bold to your category and sub category . Link to category and sub category has structure : http://yourblog.blogspot.com/search/label/your-category

If you want to make multi-level menu in page navigation (About us ,contact us ....) ,you can also replace the code
<div id="navpages">
             <ul>
                 <b:section id='page' showaddelement='yes'>
                     <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
                          <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.href'><data:link.title/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>
                 </b:section>               
             </ul>
             <div class="clear"></div>
         </div>
with the code has structure like this
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>

3,The most important step :
find this code :
#navcats {
    width:970px;
    background: url(http://img651.imageshack.us/img651/9570/bggradientlines.gif) repeat;
    border-bottom:1px solid #efefef;
    position:relative;
    z-index:1;
}
and change z-index :1 to z-index:999
z-index:999 will make this menu float on others elements . If you don't change this value ,you will see multi-level menu is hidden by other elements .

That's all .Save template and you are done .
Want to keep update ? Follow us on Facebook and Twitter to find out!

Huy Dinh Quang - administrator

Huy Dinh Quang (known as Nhamngahanh) is a blogger and founder of Simplexdesign blog . Learn more about him here and connect with SimplexDesign community in Twitter,Facebook,and Google+

Related Posts

Advertisement

13 comments

  1. hello, how can i put this on simplex celebs template?
    thankyou.

    ReplyDelete

  4. Olá!
    Como posso mudar o tamanho da fonte?

    ReplyDelete

  5. I have a problem with this work.
    I make the Multi-level menu as this post but in my home page it is hidden by the Featured-Slider. Why? Help me!
    Thank you!

    ReplyDelete

  6. @gió lào : you find this code :
    #navpages {
    background:none repeat scroll 0 0 #F5F5F5;
    border-bottom:1px solid #EFEFEF;
    clear:both;
    margin-bottom:10px;
    position:relative;
    width:970px;
    z-index:1;
    }
    and change value of z-index from 1 to 999 .It wil be ok :D

    ReplyDelete

  8. i already change the value z-index1 to 999
    but the Multi-level menu is still hidden by the Featured-Slider..
    help me please..

    ReplyDelete

  9. @cinema Season : hehe ,what you find and change is not true ^^
    here is what you should do :
    find this
    #navcats {
    background:url("http://img651.imageshack.us/img651/9570/bggradientlines.gif") repeat scroll 0 0 transparent;
    border-bottom:1px solid #EFEFEF;
    position:relative;
    width:970px;
    z-index:1;
    }
    and change value from 1 to 999

    find this

    #navpages {
    background:none repeat scroll 0 0 #F5F5F5;
    border-bottom:1px solid #EFEFEF;
    clear:both;
    margin-bottom:10px;
    position:relative;
    width:970px;
    z-index:999;
    }
    and down value from 999 to 1

    Navcat is element wrap around top menu and navpages is element wrap around page list .
    Btw,I think you should increase the size of header banner for a larger one.

    ReplyDelete

  10. hi, i had change it in my blog..but i din c any drop menu for england tab and finance tab ?can anyone help me? hope to get reply as soon as possible..thanks..
    http://wc.soccerft.com/

    ReplyDelete

  11. @elnino7: please see my comments above .Maybe it can help you

    ReplyDelete

  12. after i install it..i cant c my sub category and sub-sub category?

    ReplyDelete

  13. thanx bro...
    it's working now..
    thank u very much for helping...:D

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers