Help building top menu

edited June 2012 in News & Announcements

I need to build my top menu where the "topmenu" id belongs to a div.

The a tag inside the li has a in it.

How do I enter code here so you can see what I mean?

How do I change the container_tag to be the div and not the ul?
How do I add the inside the link?

I read the menu class and the fuel_nav() user guide but can't understand how can I do what I need.

Another thing I need is a side menu that has no connection to the top menu.

For example:
Top menu: Home - About - Contact

Side Menu:
Item A
Item B
Item C
Item D

Not sure how do I create that as well.

Can someone help please?


  • edited 5:07AM
    You can wrap your code with a <code> tag to have it appear.

    To use the fuel_nav function, you pass the parameter to it as a key/value associative array. With regards to your menu, can you just wrap the fuel_nav with your div like so?
    <div id="topmenu"><?=fuel_nav(.....)?></div>
    Additionally, there is a "container_tag" parameter you can specify.

    If you want a side menu that has no connection, you can create a different menu group in the CMS or if you are using the static _variables/nav.php file, you can create a different variable ($e.g. $sidenav) and use the "var" parameter to specify to use that like so:
    // USING CMS <div id="topmenu"><?=fuel_nav(array('group_id' => 'sidenav'))?></div>
    // USING _variables/nav.php file <div id="topmenu"><?=fuel_nav(array('var' => 'sidenav'))?></div>
  • edited June 2012
    Thanks admin,

    I still don't understand a few things:

    1. How do I build something like this (How do I add the span tag into the a tag?):

    <div id="topmenu"> <ul> <li><a href="home"><span>Home</span></a></li> <li><a href="postanad"><span>Post an Ad</span></a></li> <li><a href="contact"><span>Contact Us</span></a></li> </ul> </div><!-- End topmenu--> <div id="topmenu"><?=fuel_nav(What do I put here?)?></div>

    2. "Additionally, there is a "container_tag" parameter you can specify."
    Yes, but when I specify container_tag=>'tompmenu' it puts the id in the ul tag and not in the div tag.

    Thanks for the help.
  • edited 5:07AM
    If you need a span tag injected, you can use the "pre_render_func" parameter, which takes a string value of the name of a function in which to do further processing:
    function my_menu_func($label){ return = '<span>'.$label.'</span>'; }
    The container tag is the tag used to encapsulate the list items and defaults to the "ul" tag.

    Out of curiosity, what is the reason for the span tags?
  • edited 5:07AM

    I am using a tabbed css menu, the span has a background image of the left side of each menu item's tab. (Hope it makes sense ;) )

    I am sorry admin, but where do I put this function?

    Can you maybe just give me an example of the whole code to build the menu I need? That will help me understand better.

    I hope my questions don't make you lose hair, but the problem is, I am starting to lose some... lol
  • edited June 2012
    Sure. The function can be put anywhere and would recommend perhaps in your fuel/application/helpers/my_helper.php file which is meant for site specific functions and is automatically loaded:
    // can exist in a helper function my_menu_func($label){ return '<span>'.$label.'</span>'; }
    Then in your code, you can do the following:
    // USING CMS <div id="topmenu"><?=fuel_nav(array('group_id' => 'sidenav', 'pre_render_func' => 'my_menu_func'))?></div> // USING _variables/nav.php file targeting the $sidenav variable in that file <div id="topmenu"><?=fuel_nav(array('var' => 'sidenav', 'pre_render_func' => 'my_menu_func'))?></div>
    Don't worry about the hair... I have 2 kids that got that ball rolling a while ago.
  • edited June 2012
    Hallelujah, that helped.

    The only thing I needed to chagne is in the function:
    return '<span>..
    and not
    return = '<span>...

    And thank you for the fish.... ;)
  • edited 5:07AM
    Ahh yes... I've removed that above to avoid confusion.
  • edited 5:07AM
    Good to know! Thanks David. Ran into this the other day but opted for css3 rounded borders instead.. IE's gone right?!
  • edited 5:07AM
    IE's gone? REALLY? Is it snowing in Hell? LOL

    I live in a small artists town in South Africa, IE is alive and kicking here :(
Sign In or Register to comment.