In this video tutorial by front-end web developer Lamin Sanneh, he shows us how to style navigation links using floats with HTML5 and CSS3. Since this is the age of responsive web design, he also demonstrates how to make these links responsive.
When you’re creating a responsive website design, one main feature of your website that’s going to be totally affected is the navigation menu. One way for a nav menu to adapt to a shrinking real estate is by simply changing its orientation from the usual horizontal layout to the vertical layout.
One of the features or innovations that people love about their idevices or Apple gadgets is the Retina Display, which makes the graphical user interface look much more vibrant and sharper to the naked eye. Since a lot of people using these devices for web browsing, it only makes sense that you ought to be […]
http://johnpolacek.github.io/superscrollorama/ If you want your site to be more dynamic, then you may try adding parallax scrolling to it. This effect was used in video games but now it’s making waves in the world of web design. One of the awesome plugins that you may use is SuperScrollorama, which is a super cool scroll animation […]
If you love the effects of parallax scrolling, then Stellar.js is for you. It’s a jQuery plugin that provides effects of parallax scrolling to any scrolling element, created by Mark Dalgleish. It’s very easy to install and use so newbies to web design won’t have and problems integrating it in their website. The support in […]
One of the latest jQuery plugins that would be very helpful in designing and creating menus is the jQuery-menu-aim plugin by Ben Kamens, a lead dev at Khan Academy. jQuery-menu-aim is a plugin for dropdown menus that can see the difference between a user hovering a dropdown item against navigating into the submenu’s contents. By […]
Here’s a fresh tutorial by the guys at Script Tutorials about developing a sleek musical dropdown menu with HTML5 and CSS3. This navigation menu has CSS3 animation effects and an HTML5 Audio element was used in adding music to the menu. Follow the simple steps below: Step 1 HTML <ul id=”nav”> <li><a href=”#”>Menu element</a> <ul> […]
Today’s featured MooTools snippet comes from Joel Lipman. It’s a little piece of code that you can use to contain the menu sidebar if you happen to have a dynamic content page. Joel’s site consists of a content page that changes its height often. He needed a way to prevent the menu sidebar to overlap […]
What’s great about a dropdown list interface is that it saves your site some real estate. It frees up some space on the layout for you to put in other contents and features. WordPress’ default category widget is displayed as such but unfortunately the same cannot be said about the tags list. Good thing there’s […]
Here’s another cool navigation menu that I came across. Created by the savvy web developers at Script-tutorials, the LavaLamp menu is a navigation menu that is made with pure CSS3. Below are the following codes. HTML Index.html <ul id=”nav”> <li><a href=”http://www.script-tutorials.com/”>Home</a></li> <li><a href=”#”>Menu 1</a> <ul> <li><a href=”#”>Submenu 1</a></li> <li><a href=”#”>Submenu 2</a></li> <li><a href=”#”>Submenu 3</a></li> <li><a […]