Responsive theme with 3rd level nav

[gordon daniels, modificado 10 Anos atrás.]

Hi, I really like this responsive approach. I am having a problem with getting 3rd level navigation to work though. I've read the doc at twitter bootstrap but how to translate to liferay. Do I put the 3rd level in navigation.vm or portal_normal.vm?

thanks

[Vaibhav Mittal, modificado 10 Anos atrás.]

Hi gordan,

I am also trying to convert my theme into responsive one. I am facing problems while working with navigation. If you have made responsive bootstrap navigation upto 2 levels, I would be thankfull to you if you share the file with me.
I have made navigation.vm with 3rd level working (not responsive). Let me know if you want that file. You need to do changes in navigatiion.vm and custom.css for 3rd level to do work.

Regards,
Vaibhav Mittal

[M J, modificado 10 Anos atrás.]

All page navigations should be implemented in navigation.vm. You can get multilevel navigation samples from this site. Here is a snippet of navigation.vm that I develeped based on Bootstrap 3. This one has only one level, but you get the idea:.

#foreach ($nav_item in $nav_items)

    #if ($nav_item.isSelected() && $nav_item.hasChildren())
    <li class="active dropdown">
    #elseif ($nav_item.isSelected())
    </li><li class="active">
    #elseif ($nav_item.hasChildren())
    </li><li class="dropdown">
    #else
    </li><li>
    #end

    #if ($nav_item.hasChildren())
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">$nav_item.icon() $nav_item.getName() <b class="caret"></b></a>
    #else
      <a data-target=".nav-collapse" href="$nav_item.getURL()" $nav_item.gettarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
    #end

    #if ($nav_item.hasChildren())
      <ul class="dropdown-menu">
      #foreach ($nav_child in $nav_item.getChildren())
        <li><a href="$nav_child.getURL()" $nav_child.gettarget()>$nav_child.getName()</a></li>
      #end
      </ul>
    #end

    </li>

#end

MJ

[Vaibhav Mittal, modificado 10 Anos atrás.]

Thanks MJ.

Your code is working for me. I did some modifications for my custom requirements and its working now. I also change some css properties to make it work like display and some more. And yes, from here we can nest <li>s to make other levels work (and some css properties).

I am also strugling for 2-column layout in bootstrap 3 . Here is my post/details bootstrap3 2-column layout. If you can help for the layout as well.

Regards,
Vaibhav Mittal

[M J, modificado 10 Anos atrás.]

I added the code for a two column layout template with header for Bootstrap 3 there.

MJ

[Madhusudan Aggarwal, modificado 9 Anos atrás.]

Can you guide in adding 3rd and 4th level nav

Thanks for your HELP!

---------------------------------------------------------------------------------------------------

This is the navigation.vm from Liferay 6.2 classic theme

<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
	<div class="navbar-inner">
		<div class="collapse nav-collapse">
			<ul aria-label="#language (" site-pages")" class="nav nav-collapse" role="menubar">
				#foreach ($nav_item in $nav_items)
						#set ($nav_item_attr_selected="")
						#set ($nav_item_attr_has_popup="")
						#set ($nav_item_caret="")
						#set ($nav_item_css_class="lfr-nav-item")
						#set ($nav_item_link_css_class="")

					#if ($nav_item.isSelected())
						#set ($nav_item_attr_selected="aria-selected='true'")
						#set ($nav_item_css_class="$nav_item_css_class selected active")
					#end

					#if ($nav_item.hasChildren())
						#set ($nav_item_attr_has_popup="aria-haspopup='true'")
						#set ($nav_item_caret='<b class="icon-caret-down"></b>')
						#set ($nav_item_css_class="$nav_item_css_class dropdown")
						#set ($nav_item_link_css_class="dropdown-toggle")
					#end

					<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
						<a aria-labelledby="layout_$nav_item.getLayoutId()" $nav_item_attr_has_popup class="$nav_item_link_css_class" href="$nav_item.getURL()" $nav_item.gettarget() role="menuitem">
							<span>$nav_item.icon() $nav_item.getName() $nav_item_caret</span>
						</a>

						#if ($nav_item.hasChildren())
							<ul class="dropdown-menu child-menu" role="menu">
								#foreach ($nav_child in $nav_item.getChildren())
									#set ($nav_child_attr_selected="")
									#set ($nav_child_css_class="lfr-nav-item")

									#if ($nav_child.isSelected())
										#set ($nav_child_attr_selected="aria-selected='true'")
										#set ($nav_child_css_class="selected")
									#end

									<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
										<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.gettarget() role="menuitem">$nav_child.getName()</a>
									</li>
								#end
							</ul>
						#end
					</li>
				#end
			</ul>
		</div>
	</div>
</nav>

<script>
	Liferay.Data.NAV_LIST_SELECTOR = '.navbar-inner .nav-collapse > ul';
</script>

[Ahmed bouchriha, modificado 9 Anos atrás.]

Hi,

For the 3rd navigation you can use the following code :

<nav class="nav-collapse collapse bs-navbar-collapse $nav_css_class" id="navigation" role="navigation">
    <ul class="nav navbar-nav sf-menu">
        #foreach ($nav_item in $nav_items)
            #set($nav_li_css_class = "")
            #if ($nav_item.isSelected())
                #set($nav_li_css_class = $nav_li_css_class+" selected")
            #end
            #if ($nav_item.hasChildren())
                #set($nav_li_css_class = $nav_li_css_class+" dropdown")
            #end           
            <li class="$nav_li_css_class">
		            #if ($nav_item.hasChildren())
		                <a href="$nav_item.getURL()" $nav_item.gettarget() data-hover="dropdown" data-delay="100" data-close-others="false">
		                    <span>$nav_item.icon() $nav_item.getName()</span>               
                    		<b class="caret"></b>
                    	</a>
                    #else
                	 	<a href="$nav_item.getURL()" $nav_item.gettarget()>
		                    <span>$nav_item.icon() $nav_item.getName()</span>               
                    	</a>
                   	#end
                #if ($nav_item.hasChildren())
                    <ul class="dropdown-menu">
                        #foreach ($nav_child in $nav_item.getChildren())
                            #set($nav_li_css_class = "")
				            #if ($nav_child.isSelected())
				                #set($nav_li_css_class = " selected")
				            #end
				            #if ($nav_child.hasChildren())
				                #set($nav_li_css_class = " dropdown-submenu")
				            #end
				            <li class="$nav_li_css_class">
	                            #if ($nav_child.hasChildren())
					                <a href="$nav_child.getURL()" $nav_child.gettarget() data-hover="dropdown" data-delay="100" data-close-others="false">
					                    <span>$nav_child.icon() $nav_child.getName()</span>               		                    		
			                    	</a>
			                    #else
			                	 	<a href="$nav_child.getURL()" $nav_item.gettarget()>
					                    <span>$nav_child.icon() $nav_child.getName()</span>               
			                    	</a>
			                   	#end
                               #if ($nav_child.hasChildren())
                    				<ul class="dropdown-menu">
	                        			#foreach ($nav_child_child in $nav_child.getChildren())
		                               		#if ($nav_child_child.isSelected())
												<li class="selected">
											#else
												</li><li>
											#end
												<a href="$nav_child_child.getURL()" $nav_child_child.gettarget()>$nav_child_child.getName()</a>
											</li>
										#end   
									</ul>
								#end                            
                            </li>
                        #end
					</ul>
                #end
			</li>
        #end
        
</ul>
</nav>

The 4th level navigation can be easily concluded from the 3rd navigation with a minor addition the current code.

[e-mail]

Best Regards

[gordon daniels, modificado 10 Anos atrás.]

Hi,

Just download pixelpress or liferay 6.2 to see 2level dropdown. I am exploring a couple of ways to do multi-level dropdown. Here is one interesting site:

http://imdev.in/twitter-bootstrap-multi-level-dropdown-menu-system/

good luck