Dealing with a column based layout can be a nightmare, especially in the age of responsive design and the abandonment of <table> tags used in layouts. Today, I’ve decided to tackle this problem, and have created a plugin that will let you develop a fully dynamic, full page, column based navigation using just one JS call and minimal HTML markups.
This plugin is perfect for when you want a simple navigational page that emphasizes your photography or typography. Without further ado, let’s dive into the concept of this plugin and how you can use it.
Note: This plugin has been tested in Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.
[tut demo=”https://onextrapixel.com/examples/fully-dynamic-full-page-column-based-navigation/” download=”https://onextrapixel.com/examples/fully-dynamic-full-page-column-based-navigation/fully-dynamic-full-page-column-based-navigation.zip”]
How to Create a Fully Dynamic, Full Page, Column Based Navigation
How does this work?
I have always wanted a plugin that will handle the work of division and arrangement of the containers relative to the browser’s width. This plugin will do just that. Basically, the plugin will determine each container’s width by getting the parameter “columns” defined by the user and divide a hundred by it, and the plugin will use this percentage as a width. Now, this is where it gets tricky. The column will expand according to the parameter hover_size when the user hovers over a column, showing the interactivity between the user and the user interface.
The problem is that when one column expands, the other columns will have to move out of the way and sometimes out of the view port which could create a usability problem. To overcome this, I had to recalculate each column’s width and position every time the user’s cursor enters and leaves the area. This allows the layout to always adapt to the interaction and be in the view port at any time.
Another problem I encountered is that when animating the expansion of the column’s width, it may cause a layout flickering when the animating width couldn’t catch up with the cursor, triggering mouseleave and mouseenter all over again. I fixed this by wrapping the content of each column with a wrapper and instead of animating the column itself (where mouseenter and mouseleave is being bound), the plugin will expand the width of the column immediately and animate the wrapper inside instead so that it doesn’t cause any flickering.
How-Tos
To use this plugin, make sure you’ve included the latest jQuery plugin available here, and the jquery.fullpagenav.js and fullpagenav.css which can be found here, into your document’s <head>. With almost all my plugins, we start off with a minimal HTML markup and one JS call as seen below:
HTML:
<body>
...
<ul class="nav">
<li> <img src=""> ... </li>
<li> <img src=""> ... </li>
<li> <img src=""> ... </li>
...
</ul>
...
</body>
The <img> tag will be used as a background and expands when the target is clicked. Simply remove this if you do not want a background image. You can also use a different tag if you wish, although you will need to supply a new selector option. More info on that below.
JS:
$(".nav").fullpagenav({
columns: 5,
selector: "> li",
hover_size: "30%",
animateDuration: 500,
animateFrom: "left",
clickable: true,
afterClicked: null
});
And here are all the options you can play around with:
- columns: You can define how many columns you want the plugin to divide and arrange inside a view port. It is recommended that this number is relative to the number of <li> tags in the markup, but not necessary. You can have more <li> tags than the column defined here. The plugin will put the excess columns out of the view port and let you scroll horizontally. The default value is 5.
- selector: As mentioned previously, you can switch the tag used from list to anything you like, but make sure you define your custom selector here. This option accepts a CSS selector. The default value is “> li”.
- hover_size: This option will be used as an expanded width of the hovered column to show the interactivity between the user and the interface. The option accepts a percentage value. The default value is “30%”.
- animateDuration: You can set the speed of the animation here. This duration will be used globally throughout the plugin. This option accepts milliseconds without the unit. and the default value is 500.
- animateFrom: This option lets you define which direction the expansion will occur to the hovered column. Acceptable values are “left”, “right” and “auto”. For “auto”, the plugin will automatically determine the direction from which side the cursor enters the column. The default value is “left”.
- clickable: You can turn on the ability to make each column clickable by toggling this option to “true”. Make sure you add an extra data-link attribute to the li tag containing the URL. The default value is “true”. You can see an example below.
- afterClicked: This is a callback function that will be executed after the user clicks the column. This is perfect for when you want to populate the page with an Ajax instead of a traditional page load.
How to make the column clickable
As promised, here’s an example on how to make each column clickable. First make sure your markups are as follows:
HTML:
<body>
...
<ul class="nav">
<li data-link="https://onextrapixel.com"> <img src=""> ... </li>
<li data-link="https://onextrapixel.com"> <img src=""> ... </li>
<li data-link="https://onextrapixel.com"> <img src=""> ... </li>
...
</ul>
...
</body>
And all you have to do is toggle the clickable option to “true” and the plugin will handle everything for you.
JS:
$(".nav").fullpagenav({
clickable: true
});
[tut demo=”https://onextrapixel.com/examples/fully-dynamic-full-page-column-based-navigation/” download=”https://onextrapixel.com/examples/fully-dynamic-full-page-column-based-navigation/fully-dynamic-full-page-column-based-navigation.zip”]
Conclusion
And that is it for today. I hope you enjoy my little tutorial and I can’t wait to see how this plugin will assist in your development. Stick around and stay tuned for more free plugins and tutorials. If you have any questions or suggestions, please let us know in the comments below.
