I hope this is a very simple question (I'm only using bootstrap since today), but how do I show a new page when someone clicks on a navbar item?
For example, I have this code:
<ul class="nav">
<li class="active">Home</li>
<li>Getting there</li>
<li>Japanese theme</li>
<li>Photos</li>
<li>RSVP</li>
</ul>
But how do I switch page when someone clicks on say, "Photos"?
I don't want to refresh the page and I'd prefer to do it all using AJAX.
Many thanks in advance,
As Alp says, Twitter bootstrap doesn't handle this functionality. I use PHP server side and AJAX client side to show/hide new content.
Related
So here is the html code for the contents of my first drop down menu:
<nav id="side-nav" style="display:none;">
<ul id="side-nav-content">
<li>
Information for Current Students
</li>
<li>
Timetables & Programme Structures
</li>
<li>
Support Services
</li>
</ul>
</nav>
So i'm trying to implement dynamic sub drop down menus for each of the three list items.
I originally tried adding a list within a list however that was just a shot in the dark and I never really expected it to work. I'm pretty stumped and am just looking for a pointer to the best way to go about doing this.
You can see this example, "Twitter Bootstrap Responsive Navbar with Multiple Dropdowns (Childrens)" here:
https://github.com/fontenele/bootstrap-navbar-dropdowns/blob/master/README.md
I'm trying to add the link to the first element of the dropdown that is "MORE" so that I could go to another page but I'm not able to do that. I have tried it many times but not able to do it.
The Code:
<li class="dropdown">More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Python</li>
<li>AngularJS Framework</li>
<li>.NET Framework Development</li>
<li>Swift App Development </li>
<li class="divider"></li>
<li>Java App Development</li>
</ul>
</li>
If you need the submenu to display onclick, consider using jQuery. Or if you want the menu to appear on hover, remove the jQuery in this fiddle and uncomment the piece of CSS that will handle that. - https://jsfiddle.net/awwys0z6/1/ . Otherwise, you may have to restructure your menu like this - Show hide divs on click in HTML and CSS without jQuery
$('.dropdown').click(function() {
$('.show').toggle('.show');
});
Using jQuery
$('element').on('click', function(){
//do whatever u want
});
Using javascript
<nav>
<div onclick="linkFn()">click here</div>
</nav>
function linkFn() {
//do whatever u want
}
I am looking for a way to have a navigation bar in all my .html pages without having to copy and paste it multiple times.
Here is the code:
<center>
<nav>
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
Every time I make a change in one of the links, I need to make changes in all my HTML files. I was wondering if I could have this chunk of code be a "class" of some sort, and have a reference to it in all my html files with some sort of attribute representing it. So, when I change the list "class" all the html files will be reflected in that change.
You can give you navigation a class this way.
<link src="style.css"/>
<body>
<center>
<nav class="navClass"> //giving the nav element a class
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
</body>
If you do this to all your nav's and use the same css document for all the pages you can call them in css this way. You will need an external css doucment.
//style doucment
<style>
.navClass{background-color:#FF0000}
</style>
You could also try using a jquery template plugin
Check one out here:
https://github.com/codepb/jquery-template
You could make your menu with JavaScript or as suggested by using a server side technology.
But in clean html you'll probably have to use frames which I wouldn't recommend. There might be a solution in html5 but I'm not sure.
If you're used to OOP I'd recommend the server side aproach.
Good luck!
Most text editors have a Find and replace in files or directory function. Other people have mentioned the likely solutions for server-side solutions - Jeremy Keith's book Bulletproof AJAX proved to be useful for me but requires server-side technologies such as PHP or IIS installed.
Otherwise, I used to create templates using dreamweaver which allowed you to update a menu which then updated all the places that menu was included, but there are probably open source solutions that allow the same thing that people may suggest?
I am learning twitter bootstrap 3 these days.
There is a class called "active" in bootstrap. I have seen this feature even in CSS. As I know it indicates the active page or link (probably it is the page that we are currently in). Please correct me if I am wrong. What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
If I explain this further below mark-up has used class="active" in the 2nd list element. (i.e Profile). When I run the code in a browser it adds a nice blue background to Profile. Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
<div class="container">
<div class="row">
<nav>
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
</nav>
</div>
</div>
With 4 pages in your Navigation, the .active class should be on each different list item from #1 to #4 depending on the page you're in. Below are 4 excerpts for each 4 pages.
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li class="active">Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
Jumbotron.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
FavoutieActors.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li class="active">Earnings</li>
<li>Settings</li>
</ul>
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li class="active">Settings</li>
</ul>
The active class is applied to the navigation element the user is currently viewing.
In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in. That is why the active class is applied, which comes handy when viewing a website with many navigation links.
You can dynamically add the active class to whichever element is active. You can either do this as your page is rendered. Or via JavaScript, if you wish to change the active element without posting back to the server.
From your example, by adding the active class to your 'Profile' item, it should render the item in a way that suggests visually that this is the current item or page you're viewing.
What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
The user decide what page and the designer and developer decide how its button look while the user on it. The active class can do more than it's just a markup in your page. It could be used to add different look and feel, color effects etc.
Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
You are not required to add and manage in many usual cases but sometimes you might need. From design point of view, it tells the user that he/she is now here, from programming point of view that class could be used in different ways to assign unique action for that button or other button and not for it.
The same thing for first and last classes we usually add, they allow us to do different scenarios or CSS proprieties for these buttons and/or elements.
Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.
I had a menu with links into another pages (with same menu) Now I add scrollspy on home page and add sections from home page into menu. Now my menu looks like:
<li class="">Home</li>
<li class="">Foo</li>
<li class="">Boo</li>
<li class="">Moo</li>
But scrollspy doesn't work. When I remove "/home/" from section links scrollspy works but menu works only on home page. Is possible do what I need?
My solution is check on server side whether I am on a home page and If not I am adding /home before section part.
So my code now looks like:
<li class="">Home</li>
<li class="">Foo</li>
<li class="">Boo</li>
<li class="">Moo</li>
Code for server side is in scala (I am using play framework) but in php and whatever else it would be similar.