CODEWITHSUNDEEP
phphtmltwitter-bootstrap
Erdem Ece
Erdem Ece

Reputation: 1775

Dynamic dropdown menu using php with twitter bootstrap

Thank you for reading... I have a 2 layer of navigation. which sort the content by good, bad and comment count. if user clicks on good it will bring another nav which is sort the content by time. such as today, last one week, last one month.

I can add class='active' using $_SERVER['PHP_SELF'] but twitter bootsrap dropdown menu does not have simple class='active' it is complicated. I am not able to come up with a solution. should I use for? foreach? I don't know. please see the html command in the code. this is my code.

<ul class="nav nav-tabs">
        <li <?php if (basename($_SERVER['PHP_SELF']) == '/?Top'): ?> class="active"<?php endif; ?>><a href="/?Top">Top Content</a></li> 
        <li <?php if (basename($_SERVER['PHP_SELF']) == '/?Bad'): ?> class="active"<?php endif; ?>><a href="/?Bad">Bad Content</a></li>
        <li <?php if (basename($_SERVER['PHP_SELF']) == '/?Comments'): ?> class="active"<?php endif; ?>><a href="/?Comments">Most Commented</a></li>
<!-- It's confusing me when It comes here... because as you see active option is not li tag. it's bunch of html code and also any url bellow can ben any of those up -->
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-time"></i> Today <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="URL=week" />Last 1 Week</a></li>
              <li><a href="URL=month" />Last 1 Month </a></li>
              <li><a href="URL=all" />All</a></li>
            </ul>
          </li>
    </ul>

html commend: It's confusing me when It comes here... because as you see active li is not li it's bunch of html code and also also any url below can be any of those up

Upvotes: 0

Views: 1338

Answers (1)

Hieu Le
Hieu Le

Reputation: 8415

You can use the "active" class for the outter li (the one has class "dropdown") and another "active" class in your child dropdown.

This is an example

<ul class="nav nav-tabs">
    <li class=""><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li class="dropdown active">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li class="active"><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>

A live demo in JSBin

Upvotes: 1

Related Questions