CMS 1.0 Navigation tutorial

ziggyz27 · September 2013

I am trying to find a decent tutorial on cms navigation for top menu items or left menu items, using blocks. This will be very helpful for newbie like me, I can contribute it myself if there can be some help to show me the way.

admin · September 2013

Have you reviewed this documentation?
http://docs.getfuelcms.com/general/navigation

ziggyz27 · September 2013

yes thats where I started and since yesterday, i have completed the top nav and breadcrumbs part because it uses simple saved navigation items but next challenge is to show submenu items for a Project > Categories list.

I maintain categories using a module and now I have to show categories under the projects menu-item.

admin · September 2013

If you have a menu structure that is dependent on module data, then the menu items need to be added before rendering. One way to do it is to create the additional nav items in an array and use the "append" parameter in the fuel_nav function.

ziggyz27 · September 2013

cool thanks.. that should work... i will check it out.

btw thanks for your guidance and support, Ithink fuel rocks and i look forward to contributing the best i can, right now I have to learn my way around it.

admin · September 2013

No problem. Glad you find it useful and look forward to your contributions. Are you familiar with GitHub pull requests?

ziggyz27 · September 2013

not yet but i will findout.

ziggyz27 · September 2013

I have been bangin ma head on this so i have to ask... i was looking at this http://docs.getfuelcms.com//libraries/menu but I still cant make my menu format generated....

Can you let me know if this can be generated as is? or do i have to modify my javascripts and css. notice each submenu items is placed in a div and classes are used for links instaed of li elements.

My nav menu format template is:


<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
        <li><a href="#" class="parent"><span>Product Info</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul></div>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>

admin · September 2013

Unfortunately, there isn't the ability to wrap your "ul" tags in a "div" without modifications to the Menu classes "container_tag" functionality. Would it be possible to use a "ul:before, or ul:after" CSS pseudo elements to get around that.

I don't quite see " classes are used for links instaed of li elements" however, I do see the span tags. To wrap the text in a span tag, you can use the "pre_render_func" parameter which would map to a custom function that you would need to setup that simply wraps the label value (e.g. "Sub Item 3") in a span tag:

function span_wrap($label){
    return '<span>'.$label.'</span>';
}
echo fuel_nav(array('pre_render_func' => 'span_wrap'));

ziggyz27 · September 2013

thats ok i am using something simpler... i would rather keep it simple and use something that works with fuel's current capabilities. So i am using a simpler version of navbar.

ziggyz27 · September 2013

ok i am on a much simpler template now and using some jquery to append classes where needed, so that problem is tackled for now. Below is my code where i am trying to append sub-menu items to my top menu with id=topmenu_7; well its not appending, i think I am not getting the syntax right and the documentation is very vague. please advise.


echo fuel_nav(array(
                        'container_tag_id' => 'menu1',
                        'container_tag_class' => 'topmenu',
                        'first_class' => 'topfirst',
                        'last_class' => 'toplast', 
                        'active_class' => 'active',
                        'item_id_prefix' => 'topmnenu_',
                        'append' => array('sub-menu1'=>array('label' => 'sub-menu1', 'parent_id' => 'topmnenu_7'))                        
                        )
            );

Also please advise what syntax is for style option in fuel_nav. i cant find an example of that either.

admin · September 2013

With regards to the append, that appears to by the correct syntax. If you add that to your $nav array, does it show up?

The "style" attribute is used to add classes to the item "li" elements. It works as an array syntax that can be nested. So for example, if you have a menu that you want the following classes applied:

<ul>
     <li class="class1"><a href="http://mysite.com">Item 1</a></li>
     <li><a href="">Item 2</a>
           <ul>
                <li class="class2.1"></li>
                <li class="class2.2"></li>
           </ul>
     </li>
</ul>

echo fuel_nav('styles' => array('class1', array('class2.1', 'class2.2')))

ziggyz27 · September 2013

Append issue:
i am using cms based navigation and from what i understand so far, if CMS nav is used then fuel will not read the nav file. But i have even tried putting the code in nav file but it does not render to the topmenu item referenced via the id.

Style:
thanks for the details, i may not need the jquery now.

admin · September 2013

I think it may have to do with the "parent_id" value. That should be the unique ID for that menu item in the fuel_navigation table.

ziggyz27 · September 2013

i am generating unique IDs for each element by using 'item_id_prefix' => 'topmnenu_', so it is a unique id which in this case is topmenu_7. Any other ideas?

can you guide me to make the profiler work, i feel like shooting in the dark. What is the best way to debug in fuel?

ziggyz27 · September 2013

So what I am trying to do is that I have a top meny link > Projects and Categories from the categories module. Trying to list the categories as sub-menu items under Projects. This is something i intend to do in more apps that i deploy on duel so the functionality is critical. What am I doing wrong? My plan was to just list our the topmenu then run query to pull all categories in an array and push/append them as sub-menu items under the parent. Should I instead query everything out and populate nav.php? But it seems that nav.php is being ignored since i am using cms. please advise

admin · September 2013

For the append to be properly inserted in the hierarchy, the "parent_id" value needs to be the database fuel_navigation "id" int value if you are using the CMS to generate the menu:
$append[] = array('id' => 'about/history', 'label' => 'History', 'parent_id' => 3);// where 3 is the ID value of "about"
If you are using the _variables/nav.php file it can be the array key value (which is normally a string like:
$nav["about/history"] = array('label' => 'History');
If there is data in the CMS for the navigation module, then it will use that by default unless you specify the 'file' parameter for fuel_nav().

ziggyz27 · September 2013

And thats the only thing that I had not tried, you are a miracle worker - thanks.. that worked like a charm. I was using the actual html tag id for li, not the db record id.

ziggyz27 · September 2013

i think the documentation at http://docs.getfuelcms.com/helpers/fuel_helper#func_fuel_nav should state this more clearly that the parent means the db id.

admin · September 2013

Good point. Will look into changing that.

Howdy, Stranger!

Categories

CMS 1.0 Navigation tutorial

Comments