14 DAY TRIAL // Our Webscripts staff stumbled upon an impressive jQuery plugin today, a tool that can make building and navigating one-page websites a lot easier and more interactive. It's a small jQuery plugin named ScrollMenu that adds (or can even replace) the browser scrollbar with a scroll-spy system made of smaller lines (bars), each signifying a specific section of the current page.
These lines/bars act as a progress indicator for showing what section the user is viewing, but they can also be clicked to automatically scroll the screen to that section, or hovered to show a small preview box.
In the following article, we'll show you how this plugin can be used to build a one-page portfolio, image gallery, or a general Web showcase for featuring all kind of art and images.
The plugin is great for these kinds of websites, just like most portfolios are nowadays, and can help you replace grid-based templates with a layout where each site section is shown on the full area of the page and users can scroll vertically to view one item after the next.
This kind of vertical portfolio layouts are very popular right now, and you can see them in action for UI/UX designers like Haraldur Thorleifsson (Google Maps) or concept artists like Noah Bradley.
We'll be building something similar to those sites, maybe not as complex, but something that can serve as a base for those specific types of layouts. The standard ScrollMenu package provides demos you can play around with, but we'll be creating something a little bit different, mixing and matching various configurations.
As you can see in the CodePen embed we have below, we loaded some code from the ScrollMenu demo, along with the basic CSS & JS files needed to get the whole thing running. The base.css file is practically a CSS reset while scrollmenu.css is the plugin's default style which works just fine for now.
The demo.css is also taken from the ScrollMenu demos, but we left only the basic styles we're interested in and added our own customizations.
At the bottom of our HTML file, we loaded jQuery and ScrollMenu.js, but this doesn't actually do anything with the page's content because we haven't initialized the plugin. This is quite a trivial task if you follow the provided examples and through it various thumbnail previews can be created.
To make sure the images used in the center of the page are responsive and will render properly on mobiles and when resizing the browser, we also added this to our demo.css file:
width: 100%;
}
max-height: 600px;
}
We included a very basic panel for this at the end of our page, but this can easily be moved at the top of the portfolio template if you like that layout better. Just don't forget to move the proper anchor setup in the JS configuration as well.
Variations on this layout are endless, like replacing the background color in each section's CSS with an image for showcasing with large resolution photographs, adding more complex HTML content to each portfolio item to showcase Web design projects, or combining different techniques for each panel and getting an individual experience for each section customized to what the showcased object/service is.
There's a fully working demo of our basic one-page website on CodePen embedded below (we recommend visiting the actual CodePen fullsreen result) and a self-standing portfolio template that can be downloaded from the ScrollMenu listing in your Webscripts section.
Happy coding!
