Twitter Bootstrap Nav with fuel_nav how to?

2»

Comments

  • This is a good example of what I am trying to achieve:

    http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=dropdowns-within-nav

    Thank you for the help - much appreciated.
  • edited October 2014
    The "role" attribute isn't supported with fuel_nav, however, I think you can get pretty close with the following:

    views/_variables/nav.php
    $nav['work'] = array('label' =>'What We Wo'); $nav['people'] = array('label' =>'Get Involved', 'attributes' => 'class="dropdown-toggle" data-toggle="dropdown"'); $nav['people/volunteer'] = array('label' =>'Volunteer', 'parent_id' => 'people'); $nav['people/advisors'] = array('label' =>'Advisors', 'parent_id' => 'people'); $nav['people/donate'] = array('label' =>'Donate');

    <nav> <?=fuel_nav(array('container_tag_class' => 'nav nav-tabs', 'subcontainer_tag_class' => array(0 => 'dropdown-menu'), 'styles' => array(0 => array(1 => 'dropdown'))));?> </nav>
    Note that the "style" parameter in the fuel_nav function. It takes an array structure which can mirror your navigation structure. In this case, we need to target the first level (index = 0), second item (index = 1).
  • edited October 2014
    @admin - thank you so much! spot on. really appreciate it.

    Only issue is the sub menu does not work, I can see them in the source code but they are not being displayed. ill have a look
  • edited 9:41PM
    @admin - is it possible that I create a block as a nav in CMS then locate it in the layout? I know it need update the nav manually by it doesn't matter. Many thanks.
  • edited 9:41PM
    Sure. You just need to call <?=fuel_block('my_block')?> in your layout.
  • edited 9:41PM
    @admin - thank you so much.

    The nav can show by the block, but when I set the active class I got a error.
    <li class="<?php if($this->uri->segment(1)=="about"){echo "active";}?>"?><a href="about">About College</a></li>

    And the below is the nav coding which I want to show:
    <nav class="navbar navbar-default" role="navigation" style="color:#000"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id=".navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="home"><i class="glyphicon glyphicon-home"></i> Home</a></li> <li><a href="about">About College</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Library Catalogue <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="myrecord">My Record</a></li> <li><a href="mycourse">My Course</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="newaddition">Weekly NEw Additons</a></li> <li class="divider"></li> <li class="dropdown-submenu"><a tabindex="-1" href="#">Circulation</a> <ul class="dropdown-menu"> <li><a href="notice">Library Notice</a></li> <li><a href="drop">Book Drop</a></li> </ul> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="contactus"><i class="glyphicon glyphicon-envelope"></i> Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

    There will have a 2 level dropdown menu at Services and the Contact Us will be place on the right hand side.

    I've try to study all menu, forum & search on the web to learning the nav issue, but still don't know how to do.

    Anyone can give me an idea of it please?
  • edited 9:41PM
    If you use the fuel_nav function, you can set the "active" parameter to uri_segment(1) like so:
    <?=fuel_nav(array('active' => uri_segment(1)......))?>

    Regarding the error, what was the error being displayed? Does it go away if you change $this->uri->segment(1)=="about" to $CI->uri->segment(1)=="about"
  • edited 9:41PM
    @admin
    If I place the code below in my CMS NAV Block
    <li class="<?php if($this->uri->segment(1)=="aboutus"){echo "active";}?>"?><a href="aboutus">About US</a></li>

    CMS will change my code to:
    <li class="{if $uri->segment 1=="aboutus"{echo "active";}}"}<a href="aboutus">About US</a></li>

    error message:
    Parse error: syntax error, unexpected T_LNUMBER in /home/test.com/public_html/fuel/application/cache/dwoo/compiled/a0c76cecf51c213ec15f4f54f7a9a7d1.d17.php on line 19

    And after I change the code as you said:
    <li class="<?php if($CI->uri->segment(1)=="aboutus"){echo "active";}?>"?><a href="aboutus">About US</a></li>

    CMS will change my code to:
    <li class="{if $uri->segment 1=="aboutus"{echo "active";}}"}<a href="aboutus">About US</a></li>

    error message same as before.
  • edited 9:41PM
    My layout code for my nav:
    <?php echo fuel_block('top_nav');?>
  • edited May 2015
    Try changing the syntax to something like:
    <li class="{if uri_segment(1) == 'aboutus'}active{/if}"><a href="aboutus">About US</a></li>
    FUEL tries to change PHP code to the templating syntax when you save it in the CMS as best it can but it sometimes doesn't quite work and you need to tweak it:
    http://docs.getfuelcms.com/general/template-parsing
  • edited May 2015
    @admin - it doesn't work >.<

    error message:
    Parse error: syntax error, unexpected T_LNUMBER in /home/test.com/public_html/fuel/application/cache/dwoo/compiled/b792053e8d17738538dc64c90d332578.d17.php on line 19

    even I add ">" behind if} also the same error.
    <li class="{if uri_segment(1) == 'aboutus'}active{/if}"><a href="aboutus">About US</a></li>
  • edited 9:41PM
    That looks to be a bug in the php_to_template_syntax function. I just pushed a fix for that in the develop branch for you to test out:
    https://github.com/daylightstudio/FUEL-CMS/tree/develop
  • edited 9:41PM
    @admin - after modify still the same error.

    Parse error: syntax error, unexpected T_LNUMBER in /home/test.com/public_html/fuel/application/cache/dwoo/compiled/78091acec176462639cb782de0be030e.d17.php on line 19

    <li class="{if uri_segment(1) == 'aboutus'}active{/if}><a href="aboutus">About US</a></li>
  • edited 9:41PM
    Did you merge in the develop branch? This was the change made:
    https://github.com/daylightstudio/FUEL-CMS/commit/b367cf1889e4cc1d20b8b38dae62566ce50be3fd

    Also, you need to add a closing quote after the ending {/if}
    <li class="{if uri_segment(1) == 'aboutus'}active{/if}"><a href="aboutus">About US</a></li>
  • edited 9:41PM
    @ Admin - Yeah~~ it works!! Many thanks! ^o^
  • edited 9:41PM
    I using block to create a NAV in CMS right now to complete my 1st draft homework first as I need hand out next Monday.

    But this is a problem I need to solve it afterward, any idea or who know how to build bootstrap nav in fuelcms? I've try & study the Fuelcms Blog and Menu but didn't get a works.
  • edited 9:41PM
    @admin - Sorry to bother you again.

    How can I add the "active" class to my dropdown menu?

    <nav class="navbar navbar-default" role="navigation" style="color:#000"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id=".navbar-collapse"> <ul class="nav navbar-nav"> <li class="{if uri_segment(1) == 'home'}active{/if}"><a href="home"><i class="glyphicon glyphicon-home"></i> Home</a></li> <li class="{if uri_segment(1) == 'aboutus'}active{/if}"><a href="aboutus">About College</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Library Catalogue <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="myrecord">My Record</a></li> <li><a href="mycourse">My Course</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="newaddition">Weekly NEw Additons</a></li> <li class="divider"></li> <li class="dropdown-submenu"><a tabindex="-1" href="#">Circulation</a> <ul class="dropdown-menu"> <li><a href="notice">Library Notice</a></li> <li><a href="drop">Book Drop</a></li> </ul> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="{if uri_segment(1) == 'contactus'}active{/if}"><a href="contactus"><i class="glyphicon glyphicon-envelope"></i> Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

    Dropdown active class should be look like this:
    <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Library Catalogue <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="myrecord">My Record</a></li> <li><a href="mycourse">My Course</a></li> </ul> </li>
  • edited 9:41PM
    Sorry, the dropdown should be:

    <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Library Catalogue <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/catalogue/myrecord">My Record</a></li> <li><a href="/catalogue/mycourse">My Course</a></li> </ul> </li>
  • edited 9:41PM
    @admin - I solved the problem. I make one more class before "class="dropdown" so it cannot work.

    I post my code here for someone who need.

    <li class="dropdown {if uri_segment(1) == 'catalogue'}active{/if}"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Library Catalogue <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/catalogue/myrecord">My Record</a></li> <li><a href="/catalogue/mycourse">My Course</a></li> </ul> </li>
  • edited 9:41PM
    The active class is set by specifying the active parameter which correlates to the location/id value. So if you wanted to specify the "catalog/myrecord" as active, you would need to set that as active. There is also a parameter to "cascade_selected" which means in a hierarchy like that, it will set the "active" class on all of it's parent "li" elements as well.
  • edited 9:41PM
    Respected Sir,
    I want to create product catalog on my website using bootstrap.
    Sir, I have a query, Can you please help me on that?; will be a great help.

    I have 100 products of Women Category, it's further bifurcated into four different sub-categories.
    Women >> Sandal (25)
    >> Purse (25)
    >> Kurti (25)
    >> T-shirts (25)
    Then in Men Category same way,
    Men >> Wallet (25)
    >> Jeans (25)
    >> Shirts (25)
    >> Shorts (25)
    Men & Women category is in the Navigation bar (Menu Bar).

    Now, My question is how can I link products category wise in Menu bar under men or women head?
    Code will be great help, Sir.
    Can you plz provide solution for this?
    Thanking you in advance.
Sign In or Register to comment.