While we're working on the navbar we should add a drop-down list. As drop-down functionality draws upon the same Bootstrap JavaScript plugins we connected in the previous recipe, everything is in place to make it work. We just need to add the markup.
Getting Ready
1. Open index.html in your editor.
2. Scroll down to the <div class="navbar …"> just after the opening <body>
tag.
We're ready to start to work.
How to do it
1. Within the div class="navbar …", find div class="nav-collapse". This is the
region of the navbar which collapses when the viewport width is narrower
than 980 px.
2. Within this, find the unordered list ul class="nav". This is where we created
our custom links to our site pages.
3. We're going to create a new unordered list, ul class="nav" right next to this
one, immediately after it and before the closing tag
</div><!--/.nav-collapse -->.
4. Add a new <ul class="nav"> and its closing </ul> tag.
5. Nested inside of this, we'll add a special list item whose purpose will be to
contain the drop-down menu: <li class="dropdown"> and its closing </li>
tag. As the text for this list item, put Your Account.
Your result should look like this so far:
<ul class="nav">
<li class="dropdown">
Your Account
</li>
</ul>
6. Now to insert our drop-down items, create a new unordered list with the class
of "dropdown-menu", nested within the li class="dropdown" like this:
<ul class="nav">
<li class="dropdown">
Your Account
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Cart</a></li>
</ul>
</li>
<ul>
We're almost there. What remains is to add the tag structure needed to make
"Your Account" function as a drop-down trigger.
7. Wrap the text Your Account in a link tag with a # for its href value.
<a href="#">Your Account</a>
8. We need to add a special class and a data-attribute to turn this link into a
drop-down toggle. Let's add those:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Your
Account</a>
Save the file. Refresh the page in your browser. Click on our link and you'll
see that the drop-down menu now works!
9. To add a visual cue for our users to identify the menu item as a drop-down,
Bootstrap uses a b tag with a special class. Just after Your Account and
before the closing </a> tag, add this. Notice we'll leave a space before the
<b.Your Account <b class="caret"></b>
It should now do this for you!
10. Finally, let's move our new dropdown menu to the right-hand end of the
navbar. Bootstrap has a built-in class for this—pull-right. Add that class
like this:
<ul class="nav pull-right">
<li class="dropdown">
...
Save, refresh, and your dropdown menu should now be positioned at the
right end of the navbar.
11. Copy your new dropdown menu to your other pages!
Posted by:
SAIPUL BAHARI BIN HASAN
Source:
Internet
0 comments:
Post a Comment