It is the age of responsive web designs. Gone are the days when even a boring and monotonous website used to get attention. Today, people want to retrieve the desired information as fast and as conveniently as possible. For this purpose, web developers are coming up with new strategies in order to ensure that their websites are able to score well in the race. The best method, however, is to create a website that is responsive in nature with an easy navigation system. When people will find it easier to go through your web application, it will automatically reflect in the popularity and fan following of your website.
In this post below, we will be discussing on how to create a fully dynamic, full page, column based navigation for your website using minimum HTML code and other elements. The best part is that it has been tested on almost every widely used web browser today and it works perfectly well on all of them.
How it works?
Basically it is a Plugin that will come extremely handy while managing the tabular and divisional contents on your website. Using this Plugin, you can decide the width of each column by simply using the parameter “Columns”. All you need to do is divide the column value by 100 and the rest will be taken care of by this Plugin. Yes, the percentage derived from here will be used by the Plugin in the form of width of each column. This process is undoubtedly tricky for first time users, but it is definitely an interactive approach between the user as well as the website. Parameter “Hover _size” is used here, on the basis of which each column will expand when you will hover the mouse on it.
One common problem seen here is that when one column will expand, it may reduce the visibility of other columns. Similar problems can be faced when animation is included within each of the columns on your website. Let us take a closer look at this Plugin in order to understand its usability better.
What you need?
You need to get the latest version of the JQuery Plugin in order to be able to use this Plugin effectively. Apart from this, few lines of HTML code will also be required for kick starting the process of designing and integration.
Below are some of the common options you can arrange accordingly on your website:
- Selector: There is no longer the need to stick with the list approach. Instead, go for other options for providing the same information.
- Columns: tell your Plugin about the number of columns and divisions that you want.
- AnimateDuration: decide the speed of the animation inside each column.
- AnimateFrom: decide on the direction in which the hovered column will expand.
- Hover size: for deciding the expanded width of the selected column.
- Clickable: simply by toggling the value to “True”, you can make each and every of your column clickable.
- AfterClicked: This option comes handy when you want to add extra features once the user has clicked on any of the columns mentioned by you.
A website that is dynamic and responsive in design surely manages to impress the visitors.
How to use?
To make this plugin work with your website you would need two important files – 1. jquery.fullpagenav.js and 2. fullpagenav.css. Both can be downloaded from here.
Now include both these files into <head> part of your website. And use the following simple navigation code in HTML part –
<ulclass=”nav”>
<li><imgsrc=””> … </li>
<li><imgsrc=””> … </li>
<li><imgsrc=””> … </li>
…
</ul>
You can remove these images if you don’t wish to have background image for your navigation menu. And add the following js code as well –
$(“.nav”).fullpagenav({
columns: 5,
selector: “> li”,
hover_size: “30%”,
animateDuration: 500,
animateFrom: “left”,
clickable: true,
afterClicked: null
});
Play with these function values and see how you can be creative with your navigation.
You can use ‘data-link’ property of <li> tag to make your navigation column clickable as the code below –
<ul>
<li data-link=”www.abc.com”><imgsrc=””> … </li>
<li data-link=”www.xyz.com”><imgsrc=””> … </li>
…
</ul>