Twitter Bootstrap Nav with fuel_nav how to?

anunay · December 2013

I am using boostrap framework to create my site and got stucked with the navigation as the desire class cannot be applied to the navigation. eg for dropdown there should be 'dropdown' class should be added to the parent and then 'dropdown-toggle' to the anchor and then 'dropdown-menu' to the next UL element. FYI - I am using bootstrap 2.

Any way to create bootstrap comptabile navigation structure with fuel_nav and if Yes how can we achieve this?

eg nav html:


<ul class="nav">
  <li class="active first"><a href="#">Parent #1</a></li>
  <li><a href="#">Parent #2</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent #3
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Child #3.1</a></li>
      <li><a href="">Child #3.2</a></li>
      <li><a href="">Child #3.3</a></li>
      <li><a href="">Child #3.4</a></li>
      <li><a href="">Child #3.6</a></li>
    </ul>
  </li>
</ul>

admin · December 2013

The "container_tag_class" only applies to the main ul tag so in order to get the nested dropdown-menu styling, you'll need to replicate the dropdown-menu class to target the nested "ul" by doing ul ul.

anunay · December 2013

i am sorry i dont get you. any example code would be great. thank you so much for your quick response.

admin · December 2013

I'm assuming there is a CSS rule for the ".dropdown-menu" class in the bootstrap CSS. If so, that same styling would need to be applied to a new rule like so:
.dropdown-menu, .nav ul { put the .dropdown-menu CSS code here }
Does that make sense?

anunay · December 2013

Hi There,

I modified your Menu.php class which actually generates the Bootstrap v2 compatible navigation on the fly. Here is the modified version of code. Hope this helps if someone is looking for the same solution:

https://gist.github.com/anunay/8180600

Thank you
Anunay

archienorman11 · September 2014

Hi @anunay,

Does this menu.php work with bootstrap 3? I tried to add your menu class but did not have any success.

Thanks,

admin · September 2014

There is now a "subcontainer_tag_class" property you can use to add to nested "ul" elements. It is an array value in which you'd specify the depth as they key (1, 2..etc) and the value as the class name you want to use.

archienorman11 · September 2014

Hi @admin, Thanks for your comment but I am not quite clear what you mean.

Could you give me an example of how I would apply this?

Thanks,

admin · September 2014

Sure:
<?php echo fuel_nav(array('subcontainer_tag_class' => array(0 => 'dropdown-menu')));?>

archienorman11 · September 2014

@admin, thanks but it seems to throw an error;
Parse error: syntax error, unexpected ';' in /Applications/MAMP/htdocs/wycf/fuel/application/views/_blocks/header.php

admin · September 2014

I missed a closing parenthesis. Add one to the end (I modified the code above to have it).

archienorman11 · September 2014

@admin, so just to check I am on the right track - this placed in header.php will style my menu with '.dropdown-menu' bootstrap attributes?

admin · September 2014

The above code should add the "dropdown-menu" class to the first set of "ul" tags in the dropdown.

archienorman11 · October 2014

So would:

<?php echo fuel_nav(array('subcontainer_tag_class' => array(1 => 'navbar')));?>

add "navbar" class to second set of "ui" tags?

admin · October 2014

Yes. The array key (e.g. 1), is the depth at which to apply the class.

archienorman11 · October 2014

@admin - I can't seem to see a change.
<?php echo fuel_nav(array('subcontainer_tag_class' => array(0 => 'navbar')));?> Does not have any affect on my navigation.

admin · October 2014

What version of FUEL are you running (e.g. it is currently 1.2 and you can tell by looking at the fuel/modules/fuel/config/fuel_constants.php file)?

archienorman11 · October 2014

Yes I am using 1.2

admin · October 2014

What if you use a "1" instead of a "0" for the navbar key?

archienorman11 · October 2014

Hi @admin, unfortunately no luck.

archienorman11 · October 2014

I am using the latest bootstrap css and my header code is as follows:


	<nav class="nav nav-pills nav-justified" role="navigation">
	
		<?php echo fuel_nav(array('subcontainer_tag_class' => array(1 => 'nav navbar-nav')));?>
				
	</nav>

Which file was changed to add the subcontainer_tag_class ? Perhaps I check that particular file is the latest version.

admin · October 2014

Are you using the fuel/application/views/_variables/nav.php file and if so, what does it look like?

The fuel/modules/fuel/libraries/Menu.php class and the fuel/modules/fuel/libraries/Fuel_navigation.php class are the ones that changed but if you updated to 1.2, you should be OK.

archienorman11 · October 2014


<?php 

$nav['work'] = 'What We Wo';
$nav['people'] = 'Get Involved';
$nav['donate'] = 'Donate';

//People Sublcass

$nav['people/volunteer'] = array('label' => 'Volunteer', 'parent_id' => 'people');
$nav['people/advisors'] = array('label' => 'Advisors', 'parent_id' => 'people');

archienorman11 · October 2014



<body>

	<nav class="nav nav-pills nav-justified" role="navigation">
	
		
		<?php echo fuel_nav(array('container_tag_class' => array(0 => 'navbar')));?>
		<?php echo fuel_nav(array('subcontainer_tag_class' => array(1 => 'dropdown-menu')));?>
				
	</nav>

anunay · October 2014

@archienorman11 : you can't use this https://gist.github.com/anunay/8180600, all you need is to modify this class based on the new structure that Bootstrap 3 navigation has.

archienorman11 · October 2014

Ok I can now see bootstrap classes being applied to some menu classes: ( This is what I am seeing when I 'show page source'



<nav class="nav nav-pills nav-justified" role="navigation">

	
<ul>
	<li class="first"><a href="http://wycf:8888/work">What We Wo</a></li>
	<li><a href="http://wycf:8888/people">Get Involved</a>
	<ul class="nav navbar-nav">
		<li class="first"><a href="http://wycf:8888/people/volunteer">Volunteer</a></li>
		<li class="last"><a href="http://wycf:8888/people/advisors">Advisors</a></li>
	</ul>
	</li>
	<li class="last"><a href="http://wycf:8888/donate">Donate</a></li>
</ul>
			
</nav>

archienorman11 · October 2014

@anunay - you mean modify menu.php?

anunay · October 2014

yeah, modify as per your need, as you have full control over the code so you can adjust as needed.

anunay · October 2014

well i am not sure but better to extend the menu class and modify/override the method where needed and call that. you can ask admin though on how to override the menu.php class so it won't get reverted if you plan to update your system in future with latest version.

admin · October 2014

Perhaps it might help if you pasted in what you want the HTML to look like with the proper classes.

archienorman11 · October 2014


<nav>
	
<ul class="nav nav-tabs" role="tablist">
	<li class="first active"><a href="http://wycf:8888/work">What We Wo</a></li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="http://wycf:8888/people">Get Involved</a>
	<ul class="dropdown-menu" role="menu">
		<li class="first"><a href="http://wycf:8888/people/volunteer">Volunteer</a></li>
		<li class="last"><a href="http://wycf:8888/people/advisors">Advisors</a></li>
	</ul>
	<li class="last"><a href="http://wycf:8888/donate">Donate</a></li>
</ul>
			
</nav>

Howdy, Stranger!

Categories

Twitter Bootstrap Nav with fuel_nav how to?

Comments