#1 2016-07-15 10:49:05

adisetiya
Member
From: Bogor Indonesia
Registered: 2013-05-14
Posts: 18

Implementing Mega Menu in navigation helper

I'd like to use mega menu,
already coded in html

htkuX0U.jpg?1

the html

<ul class="menu">
<li>Home</li>
<li>Mega Menu</li>
       <ul class="col">
             <h5>Some Pages</h5>
			<ol>
				<li><a href="about-us.html"><i class="icon-group"></i>About Us</a></li>
				<li><a href="services.html"><i class="icon-cog"></i>Services</a></li>
				<li><a href="faq.html"><i class="icon-question-sign"></i>F.A.Q</a></li>
				<li><a href="team-member.html"><i class="icon-user"></i>Team Member</a></li>
			</ol>

       </ul>
</ul>

but I don't have any idea to implement this to navigation-helper
Any help would be appreciate

Offline

#2 2016-09-03 09:28:07

adaliszk
Ionize Friend
From: Germany
Registered: 2010-09-20
Posts: 397
Website

Re: Implementing Mega Menu in navigation helper

Wow this would be a challange big_smile
or not:

Use the ion:tree_navigaton:

<!-- Sample code -->
<ion:tree_navigation active_class="active" tag="ul" id="my_nav" class="nav" /> 

<!-- Example of result -->
<ul id="my_nav" class="nav">
    <li><a href="home">Home</a></li>
    <li class="active"><a href="services">Our Services</a></li>
        <ul>
            <li class="active"><a class="active" href="webdesign">Webdesign</a></li>
            <li><a href="coding">Coding</a></li>
        </ul>
    <li><a href="about">About us</a></li>
</ul>

you can change the method if you want ( copy the application/helpers/navigation_helper to your theme helpers folder and modifly the get_tree_navigation function ) but this HTML markup can be styled as your design.


Webdeveloper, Programmer, Application developer, Ionize friend
@adaliszk

Offline

What's Ionize ?

Ionize is an Open Source Content Management System created by webdesigners for webdesigners.

Created and maintained by Partikule and Toopixel, Ionize wants to be the easiest and most powerful CMS.

Can I help ?

Because talent is nothing without involvement, we are looking for motivated coders and webdesigners to join the project team.

Resources

Website : ionizecms.com
Documentation : doc.ionizecms.com

Development : Ionize on GitHub
Translations : Ionize Translations