CPP Coding Standards 101

Foreword
This book includes a set of 13 HTML+CSS tutorials that will teach you how to
create and style online forms, menus, social sharing blocks, shopping cart
fly-outs, job listing widgets, animated buttons, and so much more.
All tutorials in this ebook were written by Jake Rocheleau specifically for
MonsterPost Blog. In case any questions arise after studying this ebook you
contact either Jake, or us.
CONTENTS
1. Navigation & Search

◦ Custom CSS3 & jQuery Toggle Search Form……………………………..5
◦ Color-Coded Dropdown Navigation with Submenus………....……….15
◦ How To Restyle Select Menus like Autosuggest Fields….….…..……..27
◦ How to Code a Header Navigation with Centered Logo..……….…….28
◦ How to Code a Hidden Sliding Navigation for Responsive Websites...34
◦ How to Make a Responsive Slide-Down Navigation [CSS3 + JavaScript].
.…..……..….……......…………..........……....………………..…………..….34
◦ Responsive Sliding Drawer Menu with Lightbox Effect……………….65
◦ Build a Custom CSS3 & jQuery Icon Font Dropdown Menu…………...77
◦ How to Code a Fixed Auto-Hiding Nav Bar with JavaScript…………...85
◦ Coding a Mobile-Responsive Website Layout Using Footer Navigation.
….…………..……….……..….……..……….….……..…………...…..…….92
◦ Webpage Scrolling Animation Effects with CSS3 & jQuery………….103
2. Cart
◦ Hidden Flyout Shopping Cart Menu with CSS3…..….…..…..….……..113
3. Social Sharing
◦ Hidden Social Media Sharing Popup Bubbles with jQuery Tutorial.….
…....….......………..………....……………………..………………….…….125
Custom CSS3 & jQuery Toggle Search Form
Website search is one of the most commonly-expected features in modern

design. Although it can be difficult to build usable search functionality, the
interface is often a lot simpler and more compact than you’d expect. Search
fields require a single input and a submit button which can be styled,
positioned, and formatted in any way you like.
For this tutorial I’ll explain how you can build a toggle search form with CSS3
and jQuery. I’ve provided two distinct methods for the toggle effect: a hover
and click event. All of the event handling is managed through jQuery while
CSS3 is used to display the hidden search field. You can see a live demo of my
final project code below.
Demo – Download Source Files
Getting Started
Make a new HTML file with an empty header section. The search field events
require a copy of the jQuery library. I’m also including the Font Awesome
webfont library to create a scalable magnifying glass icon.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Toggleable Search Form - Template Monster Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
I’ve chosen to include many of the header files externally through a cloud
resource CDN JS. You might alternatively choose to download the files and
store them locally if that would be easier.
My demo uses a responsive technique to hide the navigation links beyond a
certain point. The text is coded with pixel values so it will remain constant
throughout various browsers. So the effect is handled within an HTML5 nav
element using the ID #topbar.
<nav id="topbar">
<ul class="navigation">
<li class="threebar"><a href="#"><i class="fa fa-bars"></i></a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Stuffington</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="searchlink" id="searchlink">
<i class="fa fa-search"></i>
<div class="searchform">
<form id="search">
<input type="text" class="s" id="s" placeholder="keywords...">
<button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
Each link in the navigation is contained in a regular unordered list. The first list
item uses a class .threebar which creates space for the typical hamburger
menu icon. It only appears once the browser window has been resized below a
certain amount.
After the unordered list I created a div with the ID #searchlink. This contains
the magnifying glass icon as well as the dropdown toggle div contents. Both
the nav and search elements float opposing each other on either side of the
page. This will leave plenty of room as the browser window grows smaller to
keep the effect usable.
CSS Design Style

Aside from my typical CSS resets I’ve written a lengthy set of rules to style the
page. First is the navigation setup with all the primary links and the .threebar
class.
#topbar {
display: block;
height: 70px;
background: #424242;
.navigation {
display: block;
float: left;
.navigation li {
display: block;
float: left;
.navigation li a {
display: block;
float: left;
font-size: 1.4em;
line-height: 70px;
padding: 0 25px;
text-decoration: none;
font-weight: bold;
color: #c1c1c1;
}
.navigation li a:hover {
color: #dedede;
.navigation li.threebar {
display: none;
font-size: 1.8em;
.navigation li.threebar a { position: relative; padding: 0 30px; }
.navigation li.threebar a:hover {
padding: 0 30px;
color: #bababa;
background: #3a3a3a;
.searchlink {
display: block;
float: right;
position: relative;
padding: 0 40px;
right: 0;
font-size: 2.4em;
cursor: pointer;
height: 70px;
line-height: 65px;
.searchlink:hover, .searchlink.open {
color: #bababa;
.searchlink.open > .searchform {
display: block;
}
Each nav link is floated in a single line on the page. The very first .threebar link
is hidden by default using display:none. It will only appear through a media
query which becomes active on smaller screens.
You should also notice a set of styles targeting the .searchlink element. This is
the outer div which contains the magnifying glass as well as the toggle search
box. The form itself is another element which is hidden by default and will only
appear once the container gains the .open class through JavaScript.
/** search field **/
.searchform {
display: none;
position: absolute;
width: 300px;
height: 50px;
line-height: 40px;
top: 70px;
right: 0;
padding: 0 15px;
cursor: default;
.searchlink.open .searchform {
display: block;
#search {
display: block;
position: relative;
#s {
width: 270px;
padding: 8px 11px;
border: 0;
color: #eee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
.sbtn {
display: block;
position: absolute;
right: 5px;
top: 13px;
background: none;
border: none;
color: #bcbcbc;
font-size: 0.6em;
cursor: pointer;
Inside the search form there aren’t too many surprises. One area worth
explaining is the search button which also uses the Font Awesome magnifying
glass icon. Since it needs to be positioned in relation to the form field I’ve
added relative positioning onto .searchform.
The button itself is positioned absolutely with updated settings for the border
and background.
/** media queries **/
@media screen and (max-width: 515px) {

.navigation li { display: none; }
.navigation li.threebar { display: block; }
Lastly we have this brief set of responsive codes that become active once the
browser is resized to 515px or smaller. At this smaller size the search link
bumps into the other nav links and the layout starts to break down.
So first I’m hiding every single list item with the display: none property. Then
my list item with the .threebar class is displayed in place of these links. Note
that this nav menu doesn’t actually work, it’s just a placeholder to
demonstrate how you could build an interface with this same effect.
jQuery Event Handlers

Turn back into the HTML file and open a new block of JavaScript at the bottom
of the page. In my example I’ve written two different event handlers – one for
the default hover effect and another for the click event.
There is no right or wrong choice just differences of opinion, so play around
and see what you like the most.
$(function() {
var $searchlink = $('#searchlink');
// hover effect
$searchlink.on('mouseover', function(){
$(this).addClass('open');
}).on('mouseout', function(){
$(this).removeClass('open');
});
This first line creates a selector variable which can be used as a cached
element. $searchlink targets the search container and will be used in either of
the jQuery calls. My initial event handler uses the .on() method for mouseover
and mouseout events.
Inside each respective function I’m adding or removing the .open class onto
the primary search container. Remember, this class regulates when to hide or
display the search field. The entire effect is managed through this lone CSS
class.
Moving further down in my code is a somewhat larger block for the click event.
I have it commented out because we can’t use both click and hover effects on
the same page. But if you want to try it out simply hide the mouseover code
before removing the comment tag.
$searchlink.on('click', function(e){
var target = e ? e.target : window.event.srcElement;
if($(target).attr('id') == 'searchlink') {
if($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
});
This method targets the same $searchlink element but instead listens for any
click event. Once the function runs it’ll create a new variable named target.
This checks the event itself to see which element was clicked. It helps us
recognize when to close the search form(and when not to close it).
This whole click event is predicated around checking the currently-clicked
element. If it has an ID of #searchlink then we know the user has clicked onto
the search link div. Otherwise they’ve clicked elsewhere, such as the search
input field or the search button.
You may not need to use this event syntax again but it’s worth keeping this
snippet handy just in case. JavaScript is a versatile language once you
understand how it all operates. Just remember the hover & click events
shouldn’t be running at the same time, so be sure to either comment out or
completely remove one of them.
Closing
There’s a lot of power to glean from everyday rudimentary jQuery and CSS
techniques. I hope this search bar tutorial can be of use to front-end
developers and designers on any type of project. Feel free to download a copy
of my source code and let us know your thoughts in the post discussion area.
Color-Coded Dropdown Navigation with Submenus
Dropdown menus have been around for years and they’ve served their
purpose quite well. Very much like old-yet-functional technology, dropdown
menus continue to support users from all browsers and operating systems.
The major differences have come about from a change in newer trends with
jQuery and CSS3. I recently found a great example on the Tuts+ website and
decided to recreate a similar menu structure.
In this tutorial I want to demonstrate how you can build a multi-tier dropdown
menu with jQuery. The most basic solution is to create a menu with one
dropdown list. But it’s possible to nest two or even three menus into a list to
create sub-menu flyouts. I’ll be using color-coded menu links following Tuts+
to replicate a similar interface. Take a peek at my sample demo to get an idea
of the final product.
Live Demo – Download Source Files
Getting Started
Creating the menu is primarily within the domain of CSS but the dropdown
effect is created using jQuery. It is possible to build this entirely in CSS but
only modern browsers would support that functionality. I’ve chosen jQuery
because it’s more efficient and universally supported.
<!doctype html>
<html lang="en-US">
<head>
<title>Color-Coded Dropdown Nav Menu - Template Monster Demo</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
Grab a local copy of the jQuery library and include this in the document
header. Also create a separate stylesheet named styles.css which will contain
all the page structure and menu design.
For the page itself I’ve created an outer wrapper using the ID #wrapper. Inside
is an unordered list with the ID #menu. This main menu container holds all the
primary links, most of which also contain sub-menus. The “categories” link
includes a sub-sub-menu which holds sub-categories. This is what the HTML
structure looks like:
<div class="wrapper">
<ul id="menu" class="clearfix">
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li class="purple"><a href="#">Design</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
</ul>
</li>
<li class="green"><a href="#">Writing</a>
<ul>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Storytelling</a></li>
</ul>
</li>
<li class="aqua"><a href="#">Accounting</a>
<ul>
<li><a href="#">Taxes</a></li>
<li><a href="#">Credit</a></li>
<li><a href="#">Asset Management</a></li>
</ul>
</li>
<li class="red"><a href="#">Marketing</a>
<ul>
<li><a href="#">Print</a></li>
<li><a href="#">Digital</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Presenting</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li class="blue"><a href="#">Development</a>
<ul>
<li><a href="#">HTML5/CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li class="gold"><a href="#">Photography</a>
<ul>
<li><a href="#">Mechanics</a></li>
<li><a href="#">Composition</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
Each of the internal category links have an additional class name. This is how
we can setup unique colors which take over the link and sub-menu while the
user is hovering. It’s all very straightforward and each nested UL element is
contained within a parent list item.
Designing with CSS

At the top of my stylesheet you’ll notice a large block of page resets. These
remove default browser settings like margin/padding and font sizes to create
a uniform blank slate.
Below the resets I’ve setup a primary page structure for the main elements. An
outer nav element spans the entirety of the page using a dark blue
background. Inside is the #wrapper div which centers content and holds the
main navigation.
/** page structure **/
nav {
display: block;
width: 100%;
height: 70px;
.wrapper {
display: block;
margin: 0 auto;
width: 750px;
#menu {
display: block;
position: relative;
z-index: 99;
In the top-tier menu we have all the main links which are displayed at all times.
Each anchor link is a block-level element so it takes up more space for users to
hover. Notice the 2nd tier menu has a z-index property of -1. This will ensure
that the dropdown appears beneath the main blue navbar to hide excessive
padding or drop shadows.
These 2nd tier menus are targeted as #menu li ul because they’re the 2nd ul
element. I’m using absolute positioning so they’ll fit relative to the parent list
item while keeping the z-index property in check. Now we get into the 3rd tier
menu which is a flyout display of extra categories.
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
position: relative;
float: left;
padding: 0 35px;
font-size: 1.5em;
line-height: 70px;
font-weight: bold;
color: #f5f5f5;
#menu li a:hover, #menu li a.active {
background: #fff;
color: #2c343b;
#menu li ul {
display: none;
position: absolute;
top: 70px;
width: 200px;
background: #fff;
z-index: -1;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
box-shadow: 0 2px 7px rgba(0,0,0,0.45);
#menu li ul li {
display: block;
width: 200px;
}
#menu li ul li a {
display: block;
float: none;
color: #4e5b67;
font-size: 1.35em;
line-height: 50px;
padding: 0 15px;
#menu li ul li a:hover {
color: #fff;
These appear as the 3rd ul element in the navigation. You’ll notice that I’m
actually targeting the 2nd tier UL with an additional class of .expanded. This is
because of the drop shadow effect which needs to appear like one big block –
so instead of creating 2 different menus I’m just making the dropdown menu
wider. This gives the illusion of a flyout menu which is connected to the
original dropdown.
#menu li ul.expanded {
width: 400px;
#menu li ul.expanded li { margin-right: 200px; }
#menu li ul li ul {
display: none;
position: absolute;
left: 200px;
top: 0;
height: 100%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }
#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #4f4c83; color: #fff; }
#menu li ul li.purple ul { background: #4f4c83; }
#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #65834c; color: #fff; }
#menu li ul li.green ul { background: #65834c; }
#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #4c7983; color: #fff; }
#menu li ul li.aqua ul { background: #4c7983; color: #fff; }
#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #834c4c; color: #fff; }
#menu li ul li.red ul { background: #834c4c; }
#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #4d6899; color: #fff; }
#menu li ul li.blue ul { background: #4d6899; }
#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #97944c; color: #fff; }
#menu li ul li.gold ul { background: #97944c; }
Absolute positioning is also used for the 3rd tier menu which is fixed at the
very top of the nav container. This means it will always be directly parallel with
the original dropdown so it just looks like one large menu.
Also the parent list item can take one of several classes like .purple, .green,
or .aqua. You can also create your own color class by mimicking the same
template with a different background color.
Dropdown Menus with jQuery

Finally we get to the pièce de résistance of this beautiful navigation that
makes the whole thing sparkle. We only need a couple event handlers related
to the 2nd tier and 3rd tier menus. But first I should clarify a small block of
code located at the very start of my JavaScript:
$('a[href="#"]').on('click', function(e){
e.preventDefault();
});
This selector matches every anchor link using the href=”#” attribute. A link
using the hash symbol leads nowhere and is generally meant for wireframing
or demos like my example. But when a user clicks the hash symbol it gets
loaded into the browser window – kind of annoying and not really useful.
This block of jQuery stops that from happening. It’s not necessary to keep this
block of code if you remove all the blank links but it does come in handy when
building small demo pages.
$('#menu > li').on('mouseover', function(e){
$(this).find("ul:first").show();
$(this).find('> a').addClass('active');
}).on('mouseout', function(e){
$(this).find("ul:first").hide();
$(this).find('> a').removeClass('active');
});
First up is the original dropdown menu. When a user hovers any list item
contained within #menu we display the very first sub-menu list. This is
selected through ul:first which is a CSS pseudo-class targeting the first child.
The hovered link also gets a class of .active to keep it highlighted even if the
user moves their mouse down onto links in the dropdown menu.
During a mouseout event the menu will hide and the parent anchor link is no
longer active. We’ll find a very similar approach used for the sub-sub menu but
with a little more detail.
$('#menu li li').on('mouseover',function(e){
if($(this).has('ul').length) {
$(this).parent().addClass('expanded');
$('ul:first',this).parent().find('> a').addClass('active');
$('ul:first',this).show();
}).on('mouseout',function(e){
$(this).parent().removeClass('expanded');
$('ul:first',this).parent().find('> a').removeClass('active');
$('ul:first', this).hide();
});
One immediate change you’ll notice is the logic check for $

(this).has(‘ul’).length. In plain English this says “if the hovered link has another
sub-menu then do something”. What we do is add an .expanded class onto the
parent list so we get that wider flyout menu effect.
Then everything else follows the same pattern by adding the .active class onto
the parent link and displaying the sub-sub-menu. In reverse during a mouseout
event the .expanded and .active classes are removed while hiding the sub-sub-
menu.
When you see a jQuery selector like $(‘ul:first’,this) it’s taking 2 parameters.
Normally we only pass one parameter which is the target, but the 2nd
parameter is the domain(also known as context). For the
mouseover/mouseout event this refers to the sub-menu list item. So within
the domain of a list item we want to target the very first child(the sub-sub-
menu). Following this same logic we could even build a 4th-tier menu if
needed.
Closing
Unlike other navigation with sub-menus this tutorial creates dropdown menus
within even measurement. Each flyout menu appears in the same location
connected to the parent link by a common color scheme. This may not be an
effect that works for every website but it’s certainly unique and still provides
an exceptional user experience. Feel free to download a copy of my source
code and just go nuts with it. I mean don’t literally go insane, but yeah the
code is free so have fun!
How To Restyle Select Menus like Autosuggest Fields
Live Demo – Download Source Code

Most users commonly relate autosuggest features with text-based input
fields. Select menus are quite different because they only support a limited
number of options. This is preferred in many instances where you only want
the user to select one specified option(ex: gender or location). But let me spin
you a new idea – consider how a select field would change if it were instead
designed like a text-based input field. How could we accomplish such a task?
Enter the sleek and sexy flexselect plugin to solve this intricate problem. Using
a bit of jQuery it’s simple to convert a select dropdown menu into an
autosuggest input field. This process would be most useful to designers who
want a new aesthetic feeling to their form layout. The plugin does support
mobile browsers but older legacy browsers would best be served with a
fallback. Take a peek at my live demo to see the final effect.
How to Restyle Select Menus – Getting Started

Flexselect requires a small number of libraries for JS and CSS. First head over
to the plugin pageand download a copy of the code from Github. You’ll also
need a recent copy of the jQuery library.
Create your own separate stylesheet named styles.css to contain all the
primary document styles. There’s a file named flexselect.css within the .zip
archive that should also be included – this will handle the default flexselect
styles. Then include a copy of the jQuery library along withliquidmetal.js and
flexselect plugin. The liquidmetal library is used solely for sorting and ranking
during autosuggest.
<!doctype html>
<html lang="en-US">
<head>
<title>Restyled Select Menus - Template Monster Demo</title>
<link rel="stylesheet" type="text/css" media="all" href="css/flexselect.css">
<script type="text/javascript" src="js/liquidmetal.js"></script>
<script type="text/javascript" src="js/jquery.flexselect.js"></script>
</head>
The page body is straightforward relying on a single select menu. For my demo
I’ve created two duplicate select fields where one has the .flexselect class.
The select menu itself lists all the capital cities from each US state. We could
fill the input field with a substantial number of options from any topic and the
plugin should work just fine.
<div class="select-container" style="text-align:center;">
<select class="flexselect" name="select1">
<option value="1">Montgomery, Alabama</option>
<option value="2">Juneau, Alaska</option>
<option value="3">Phoenix, Arizona</option>
<option value="4">Little Rock, Arkansas</option>
<option value="5">Sacramento, California</option>
<option value="6">Denver, Colorado</option>
<option value="7">Hartford, Connecticut</option>
<option value="8">Dover, Delaware</option>
<option value="9">Tallahassee, Florida</option>
<option value="10">Atlanta, Georgia</option>
<option value="11">Honolulu, Hawaii</option>
<option value="12">Boise, Idaho</option>
<option value="13">Springfield, Illinois</option>
<option value="14">Indianapolis, Indiana</option>
<option value="15">Des Moines, Iowa</option>
<option value="16">Topeka, Kansas</option>
<option value="17">Frankfort, Kentucky</option>
<option value="18">Baton Rouge, Louisiana</option>
<option value="19">Augusta, Maine</option>
<option value="20">Annapolis, Maryland</option>
<option value="21">Boston, Massachusetts</option>
<option value="22">Lansing, Michigan</option>
<option value="23">Saint Paul, Minnesota</option>

<option value="24">Jackson, Mississippi</option>
<option value="25">Jefferson City, Missouri</option>
<option value="26">Helena, Montana</option>
<option value="27">Lincoln, Nebraska</option>
<option value="28">Carson City, Nevada</option>
<option value="29">Concord, New Hampshire</option>
<option value="30">Trenton, New Jersey</option>
<option value="31">Santa Fe, New Mexico</option>
<option value="32">Albany, New York</option>
<option value="33">Raleigh, North Carolina</option>
<option value="34">Bismarck, North Dakota</option>
<option value="35">Columbus, Ohio</option>
<option value="36">Oklahoma City, Oklahoma</option>
<option value="37">Salem, Oregon</option>
<option value="38">Harrisburg, Pennsylvania</option>
<option value="39">Providence, Rhode Island</option>
<option value="40">Columbia, South Carolina</option>
<option value="41">Pierre, South Dakota</option>
<option value="42">Nashville, Tennessee</option>
<option value="43">Austin, Texas</option>
<option value="44">Salt Lake City, Utah</option>
<option value="45">Montpelier, Vermont</option>
<option value="46">Richmond, Virginia</option>
<option value="47">Olympia, Washington</option>
<option value="48">Charleston, West Virginia</option>
<option value="49">Madison, Wisconsin</option>
<option value="50">Cheyenne, Wyoming</option>
</select>
</div>
If you were to copy/paste this into your page body it should recreate the select
menu. But for now it will appear just like a regular-old select menu, a regular-
lookin’ guy just like Bruce Wayne. To transform Bruce Wayne into Batman we
need the Bat Signal! I mean we need JavaScript… but first let’s take a peek at
the CSS to see how my document is setup.
CSS Page Styles

I’m using a very slender page layout which is responsive but limited in width.
The container wrapper has a max-width of 750px but can be resized smaller as
needed. Each of the select fields will also resize using a simple media query.
#wrapper {
display: block;
max-width: 750px;
margin: 0 auto;
padding: 20px 15px;
background: #fff;
border-radius: 8px;
.flexselect {
width: 380px;
padding: 4px;
margin-bottom: 45px;
#simple {
display: inline-block;
width: 380px;
@media all and (max-width: 500px) {
.flexselect, #simple { width: 200px; }
}
The class .flexselect is applied to our updated form field. The ID #simple is
only used as a comparison to the field so we can see the differences in action.
Both are fixed at 380px wide until the viewport drops below 500px when
they’re resized a little smaller.
My other CSS code is used to reset the page formatting for default margins,
padding, and font styles. The header text uses Roboto Slab included from
Google Web Fonts.
Also note that we could overwrite many of the common styles for each select
input field. The flexselect.css stylesheet is fluid and easily pliable. You’d just
need to copy a selector and then paste it into your own stylesheet. Overwrite
each element with new properties as desired. Simple!
Flexselect & jQuery

Finally moving back into the HTML file we need to add one small block of
JavaScript. There isn’t a lot of customization available since the plugin is still
very new. But to get it running all we need is a target on the .flexselect
element and a call to the related method. Here’s my code block located inside
a <script></script> tag:
$(document).ready(function() {
$(".flexselect").flexselect();
});
Once the document finishes loading we run a single line of code. $

(“.flexselect”) targets every select element with the class .flexselect. This is
useful because you could build multiple select elements using this same class
and still only need one line of code.
Then I’m calling a method flexselect() which is defined inside the jQuery
plugin. There are some voluntary options which would require digging around
in the original source code. One such example on the plugin’s website is a bit
of code which allows users to add their own entries into the select menu:
$("select.flexselect").flexselect({
allowMismatch: true,
inputNameTransform: function(name) { return "new_" + name; }
});
Each key:value pair is denoted by a keyword and specific value. So for example
allowMismatch will allow users to enter content which does not match any of
the values. This would certainly be useful for testing and could work great on a
live site if the functionality was needed.
Closing
Developers who want to push further into new web technology will enjoy this
plugin. Since the autosuggest items are pulled from HTML it takes away worry
of loading content through Ajax. Once the primary developer updates his
documentation this plugin could be a real home run. So step up to the plate,
take a swing and see what you can do. Also feel free to download a copy of my
source code and use it for your own web projects.
How to Code a Header Navigation with Centered Logo
In this tutorial I will demonstrate the CSS and HTML required to build a
centered logo header design. The webpage body is fairly bland since we are
focusing on the core header. But definitely check out my live demo example to
get an idea of what we are trying to build. The best solution is to incorporate
transparent PNG images for your logo design, which will provide no
background and sits directly in the middle of navigation links.
Helpful Resources
To begin I want to share a reference to the freebie PSD kit I will be using. This
is called the Kitchy UI Kit and it is a free download on Blugraphic. The PSD
includes a series of buttons, dropdowns, forms, and other helpful interface
features. But more specifically we can find a rounded logo banner which would
be perfect in our functional layout.
You do not need a full copy of the UI kit since my downloadable source code
will have the logo cropped into a PNG. But if you want to check out their full
set I definitely recommend it. There are lots of cool free items you may
customize and setup with very little understanding of Adobe Photoshop.
Building the Content
We can start in the base file index.html where I have put together the full
layout codes. The file is written in HTML5 doctype with a few custom Google
Web Fonts.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Centered Logo Website Demo</title>
<link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
<link rel="icon" href="http://www.templatemonster.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?

family=Montserrat+Alternates:400,700">

</head>
Also the HTML5shiv document contains JavaScript code to properly render

new HTML5 elements in older versions of Internet Explorer. Any browsers
running IE8 or earlier may have trouble with elements like header, footer,
article, and section. But this is a quick fix and even hosted on Google’s servers.
In the actual body we only need a few more containers to house the main
heading. I will be using absolute positioning on the logo but using a
percentage will allow for a fluid-width design. This is tough though, because
you need to determine exact specifications for the navigation links as well.
<body>
<div id="w">
<header id="top">
<h1><a href="index.html">Kitchy Food & Recipes</a></h1>
<ul id="nav">
<li><a href="#" class="sel">Homepage</a></li>
<li><a href="#" class="midsection">Utensils</a></li>
<li><a href="#">Our Recipes</a></li>
<li><a href="#">Learn to Cook</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</header>
Notice how the <h1> header tag actually comes before the full navigation list.
This is important for SEO markup where search engine bots will crawl your
page to scan for website info. The headings generally appear at higher levels
than the regular content, so this pattern is beneficial in keyword rankings. Also
the header text will not display on the page, although it will display when
being crawled by web bots.
Styling with CSS

The most important part of getting this to work properly is having the right
syntax on each item. I want to look over the header section considering this is
where a lot of the codes tend to be focused.
#top {
display: block;
padding-top: 125px;
position: relative;
#top h1 a {
display: block;
width: 200px;
height: 176px;
position: absolute;
top: 25px;
left: 320px;
margin: 0;
padding: 0;
z-index: 9999;
text-indent: -9999px;
background: url('../images/logo.png') no-repeat;
#nav {
display: block;
width: 100%;
list-style: none;
padding: 0 10px;
font-family: 'Montserrat Alternates', Helvetica, sans-serif;
#top is the very outermost container attached onto the HTML5 <header>
element. We need to use relative positioning so this becomes the new
container for internal elements with absolute positions. Namely the h1 logo
which is specified in the same chunk of code.
We can easily hide the internal text with text-indent: -9999px attaching a
negative value. The z-index property will ensure the image always stays on top
of the other elements. This includes navigation links, and internal page
content which may overlap the header.
#nav li { display: inline; line-height: 1.56em; }
#nav li a {
display: block;
float: left;
font-size: 17px;
font-weight: 700;
text-transform: none;
color: #777c7f;
text-shadow: 1px 1px 0 rgba(255,255,255,.85);
margin-right: 13px;
padding: 9px 8px;
border-radius: 4px;
#nav li a:hover {
color: #64802c;
#nav li a.sel {
color: #64802c;
background: #d4e1b5;
#nav li a.sel:hover {
border-bottom: 0;
background: #c0d392;
color: #566b2b;
#nav li a.midsection {
margin-right: 220px;
}
The actual navigation settings are fairly rudimentary and certainly nothing
advanced for a CSS enthusiast. I have attached a .sel class onto anchor links
which should be denoted as the currently active webpage. Plus we use the
class .midsection to define which link will split the center area and make room
for our logo image. Notice how this could be updated in a responsive design if
links need to change places.
But explained simply, any fixed website layout can easily implement this same
concept by tweaking just a few pixel values. The absolute positioning for the
logo is something worth taking into account. Similar to which navigation link
will need the midsection class for everything to appear even. But of course you
should take a look at my demo codes if the concept is still fuzzy.
Final Thoughts
I hope this tutorial will prove useful to other front-end web developers. The
techniques used in this demo can surely be applied into almost any similar
website layout. Additionally the CSS classes are quickly portable into another
file, so you may copy and paste my own codes without a struggle. If you have
additional questions or comments feel free to share with us in the post
discussion area below.
How to Code a Hidden Sliding Navigation for Responsive
Websites
Mobile responsive web design has no doubt changed the way visitors are
browsing websites. The process of building a single website layout which can
adapt to any platform is becoming essential. It is often easier to follow this
route instead of building separate versions for desktop and mobile.
For this tutorial I want to showcase the open source jQuery plugin mmenu. It is
designed to work as a slick navigation for web applications which need a
responsive design. The plugin homepage includes a number of smaller demos,
but nothing which takes up the entirety of the browser window. Take a peek at
my live tutorial sample to get an idea of what we’re building.
Getting Started
First we need to download a copy of the mmenu plugin along with a sample copy
of the jQuery library. This could be downloaded locally or hosted externally using a
CDN. Either way it is important that you have the jQuery script added before
jquery.mmenu.min.js.
<!doctype html>
<html lang="en-US">
<head>
<title>Template Monster Sliding Navigation Demo</title>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" media="all" href="css/mmenu.css">
<link rel="stylesheet" type="text/css" media="all and (min-width: 960px)" href="css/mmenu-widescreen.css">
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>

</head>
The additional meta viewport tag is crucial to get a natural behavior from the
browser. This means you will need to force users into a 1×1 ratio on all devices.
Scaling could be possible but for this demo I have it disabled.
Beneath the meta tags I have included three separate CSS stylesheets. The
first is my regular document which focuses on the overall page structure. The
mmenu.css is all we need to get the effect working properly. But there is a
second stylesheet for desktop users which should only be applied using CSS
media queries. Thankfully we can include this into one header call which only
adds mmenu-widescreen.css in an viewing environment larger than 960
pixels.
Creating the Page

Inside the body tag I have two separate content sections. The navigation menu
has to be styled with an outer <nav> or <div> tag followed by an unordered
list. The mmenu plugin will hide this by default so it really does not matter
where it appears in the HTML.
<body>
<nav id="slidemenu">
<ul>
<li class="mm-selected"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">My Work</a>
<ul>
<li><a href="#proj1">Some Project</a></li>
<li><a href="#proj2">Cool Item</a></li>
<li><a href="#proj3">Seriously So Cool</a></li>

</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
The nav ID #slidemenu is how I target this navigation in jQuery. Also notice
the additional list item class .mm-selected is applied onto the home link by
default. Once the page is loaded it will reset back onto the home view which is
automatically selected.
<div id="wrapper">
<header id="topbar">
<a href="#slidemenu" id="menulink"></a>
<h1>TemplateMonster Demo</h1>
</header>
<div id="content">
<section id="home">
<h2>A Simple HTML5 Webapp</h2>
<p>Inner content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
</section>
<section id="about" class="hideme">
<h2>About Stuff</h2>
<p>Sweet old thing. Only two of those words describe Mom, so I know you're lying to me.</p>
</section>

<section id="work" class="hideme">
<h2>Example Works</h2>
<p>Select an item from the navigation sub-menu.</p>
<p>Each project page displays a popular shot from Dribbble with a link back to the original source.</p>
<p>And now more Ipsum...</p>
<p>What is she doing at a beauty pageant? Is she running the lights or something? Whoa whoa whoa whoa.
Wait. Are you telling me you have a multi-stage trick with hidden identities?</p>
</section>
My inner wrapper div is separated from this navigation semantically to avoid

complicating the layout style. The header #topbar with the navigation link
#menulink has to be added manually into the HTML. This menu link triggers
the responsive navigation once the screen is below 960px. If you don’t include
the widescreen stylesheet then this hidden navigation is the only display style
no matter what the screen resolution.
Each inner content section is used to represent a different page. Only the first
home page setup is displayed initially, so each other section to follow is using
the class .hideme. jQuery can be used when switching between items so this
class is a good organization system for my little mini-demonstration.
Custom Design Styles

I haven’t gone into either of the mmenu stylesheets because it is easier to
write in your own. But keep in mind it is possible to merge these together and
include the media query directly within the CSS file itself. mmenu is very
flexible so don’t be afraid to switch around code getting it to work exactly as
you need.
#wrapper {
display: block;
width: 100%;
background: #fff;
#topbar {
display: block;
height: 65px;
background: #5892d1;
background: -moz-linear-gradient(top, #5892d1 0%, #367ac3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5892d1), color-stop(100%,#367ac3));
background: -webkit-linear-gradient(top, #5892d1 0%,#367ac3 100%);
background: -o-linear-gradient(top, #5892d1 0%,#367ac3 100%);
background: -ms-linear-gradient(top, #5892d1 0%,#367ac3 100%);
background: linear-gradient(to bottom, #5892d1 0%,#367ac3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5892d1',

endColorstr='#367ac3',GradientType=0 );
border-bottom: 2px solid #4a74a2;
#topbar h1 {
line-height: 65px;
text-align: center;
font-size: 3.2em;
font-weight: normal;
color: #fff;
font-family: 'Belleza', 'Trebuchet MS', Arial, sans-serif;
text-shadow: 1px 1px 0 rgba(0,0,0,0.56);
#topbar #menulink {
background: center center no-repeat transparent;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d
2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi/P//PwOtARMDHQBdLGFBYt+nkR2KjEhxQqvIYaR7cD
2glSWMo0mY3DiJo5Edi4ZPEqZ7nMSP5pPRon60qB9NwpQDgAADAMIxHUJvWs/TAAAAAElFTkSuQmCC);
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
#content {
max-width: 800px;
padding: 12px 22px;
height: 100%;
margin: 0 auto;
background: #fff;
margin-top: 15px;
.hideme { /* use for hidden content sections */
display: none;
I was intrigued looking at the original mmenu CSS to find the toggle
background image was generated using base64 code. There are lots of online
tools for converting images into base64, and it helps if you already have an
image handy. These can scale nicely with the object itself but it is also difficult
to customize without regenerating more code.
Most of the core page is simple and easy to understand. The h1 element in the
top navigation bar is resized to make the text smaller as the screen gets
smaller. This is beneficial since we need to keep the navigation link as a central
focus point. But you notice how easy it is to replicate the iOS UI design
concept right within CSS3.
Frontend jQuery Codes

Now we can tackle the final piece to this puzzle wrapping the whole thing
together. mmenu has a large number of options for customizing the display
and functionality. I have tried to keep my list to a minimum, but it can be fun
toying with different options. This code is added into the page right before my
closing </body> tag.
$(function(){
$('nav#slidemenu').mmenu({
slidingSubmenus: false,
moveBackground: false,
onClick: {
close : true,
setSelected : true,
setLocationHref : null,
delayLocationHref : true,
blockUI : null,
callback : function(){
// check which link has been clicked
var newpageurl = $(this).attr('href');
var newsection = "section"+newpageurl;
$('#content section').each(function(){ // add the .hideme class onto every section
if(!$(this).hasClass('hideme')) { $(this).addClass('hideme'); }
});
$(newsection).removeClass('hideme'); // display only the selected content section
});
});
If you have questions then definitely check out the mmenu options documentation for
a better idea of how these work. SlidingSubmenus will prevent the submenus
from sliding left/right and instead appear directly beneath the navigation link.
You should try both and see which works best for your web application.
Also the moveBackground option is important because without a background

color your page will appear glitchy between opening and closing the menu.
These two are very simple bits of code however the onClick parameter takes a
list of new options.
Here we can rewrite settings and even a callback function which is triggered
whenever a user clicks on a link. SetLocationHref is used to force the browser
into loading whichever value you have in the link’s HREF attribute. Instead of
using this method I have put together my own function which is written into
the callback option.
We can get the new section name by obtaining an ID from the link and then
adding it into a jQuery selector. I am checking each content section to make
them all use the .hideme class, then we remove that class from the new
content section. This will hide everything in the page content and only display
new content based on which link the user has clicked.
There are many jQuery plugins for animation which you could add into the
content display. But these are also very aesthetic and not necessary to get
your application working. This is a great foundation to lay out any mobile
webapp or responsive website without struggling to write your own JavaScript
from scratch.
Final Thoughts
I really love this plugin because it is almost no-struggle to install once you
understand the basics. It is also a rudimentary process to go in and customize
the stylesheet to match your own website layout. Mobile developers will love
this plugin because it provides easy-access on desktop screens as well. Feel
free to download a copy of my demo codes and see how you can work this
responsive navigation into your own websites.
How to Make a Responsive Slide-Down Navigation [CSS3
+ JavaScript]
There are plenty of CSS3-based responsive navigation menus which are

great for general content websites. The only problem is that not all browsers
support native CSS3 transition effects.
Using JavaScript as an alternative helps when applying the sliding animation

effect onto responsive layouts. But CSS3 media queries are also very
important towards the final product.
In this tutorial I want to demonstrate how we can build a very simple
responsive navigation using the Responsive Nav script. This is open source and
free to use on any project. It also comes along with its own stylesheet for
automated customizations. I really like this script because it does not require
any dependencies like jQuery, plus the styles are easy to customize and fit into
any working layout. Check out my live demo to get an idea of what we are
making.
Getting Started
The first step is to download a copy of Responsive Nav which is linked right on
the homepage. You can also download a copy directly from Github if that is easier.
Inside this .zip archive you will find a copy of the JS script along with some
extra CSS styles.
<!doctype html>
<html lang="en-US">
<head>
<title>Responsive Slide-Down Navigation Menu</title>
<link rel="shortcut icon" href="http://images.templatemonster.com/images/favicon.ico">
<link rel="icon" href="http://images.templatemonster.com/images/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/responsive-nav.css">
<script type="text/javascript" src="js/responsive-nav.min.js"></script>

</head>
I setup the internal body content using the recommended ID of #nav. You can
change this to anything you like, but it also will not get targeted by the default
styles unless you update responsive-nav.css. All of the style declarations target
this same nav ID expecting an internal unordered list element.
<div id="nav">
<ul class="clearfix">
<li><a href="javascript:void(0)">Homepage</a></li>
<li><a href="javascript:void(0)">About Us</a></li>
<li><a href="javascript:void(0)">Services</a></li>
<li><a href="javascript:void(0)">Blog</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</div>
Since the anchor links are rendered using fluid widths I had to float them all
next to each other. In order to keep the outer UL element at a fixed height I’ve
also added the CSS .clearfix class. Now it is worth noting that you can update
the internal elements to include sub-menus and more complicated styles like
background icons.
However the script itself can only handle the sliding and responsive transitions
– you’ll need to update the CSS on your own to get everything styled properly.
I would recommend building a prototype HTML/CSS version first, and then
incorporating the Responsive Nav script.
Designing with CSS

My own custom stylesheet is very basic including a number of resets along
with the page formatting. At the top you will find a CSS @import rule for
including a remote Google Web Font. This helps to style the page headers and
give the layout some uniqueness.
@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
html { overflow-y: scroll; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
padding: 0 14px;
padding-bottom: 30px;
background: #3d3d3d url('irongrip.png'); /* http://subtlepatterns.com/iron-grip/ */
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
h1 {
font-family: 'Finger Paint', Helvetica, sans-serif;
font-size: 3.0em;
line-height: 1.6em;
color: #565656;
h2 {
font-family: 'Finger Paint', Helvetica, sans-serif;
font-size: 2.4em;
line-height: 1.5em;
color: #777;
Of course, the script does not support exactly how I want the navigation to
look so I’ve written a number of extra styles. These target the navigation when
it is rendered in full, and when in a responsive mode. Plus there is a small
open/close menu link which appears after turning responsive. This element
uses the ID #nav-toggle which I have also re-styled.
/* page content */
#w {
display: block;
min-width: 260px;
max-width: 800px;
margin: 0 auto;
background: #fff;
height:550px;
#content { padding: 0 15px; }
#nav {
display: block;
}
#nav-toggle {
font-size: 1.2em;
font-weight: bold;
padding: 3px 9px;
margin-left: 15px;
border-radius: 3px;
color: #fefefe;
background: #4c7ab6;
#nav ul { list-style: none; }
#nav ul li { }
#nav ul li a {
display: block;
padding: 10px 9px;
width: 100%;
font-size: 1.5em;
background: #4c76ae;
color: #cad7ea;
#nav ul li a:hover {
background: #6588b6;
@media screen and (min-width: 600px) {
#nav ul li a {
display: block;
float: left;
width: auto;
background: none;
padding: 11px 15px;
font-size: 1.55em;
color: #444;
#nav ul li a:hover {
background: #4c76ae;
color: #cad7ea;
h1 { font-size: 4.1em; line-height: 2.0em; }
Another interesting piece in the script’s CSS file is all the default code
obtained from the Responsive Nav repository. This includes typical resets for
margin/padding on the navigation, plus a fitted width of 100%. Granted when
the navigation pulls down into responsive mode this is exactly how the menu
should appear.
#nav ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
#nav li {
width: 100%;
display: block;
.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
#nav.opened {
max-height: 9999px;
@media screen and (min-width: 40em) {
.js #nav {
position: relative;
.js #nav.closed {
max-height: none;
#nav-toggle {
display: none;
If you notice the media query at the bottom of this file it is checking when the
screen width is larger than the typical responsive cutoff point. If so, then we
do not need to see the toggle menu link and it is hidden using display: none.
Overwriting these styles in your own code is not a long process. Especially if
you already have a wireframe/mockup coded. But there are also beneficial
codes in this default stylesheet which are worth copying over into your own, or
merely including as a separate file.
Initiate with JavaScript

If you are a developer interested in this script I would recommend reading over
the usage instructions, if you have the time. There are a number of custom
options which I have not included here, to keep the tutorial light and focused.
But these function parameters may be passed in as key:value pairs within the
function call itself. Let’s take a look at my example first.
<script type="text/javascript">
var navigation = responsiveNav("#nav");
</script>
You can find this code at the very bottom of my index.html page. This will
initiate the script running on the #nav element. Now you can obviously change
this value to be anything. All you need to remember is running your own
default styles both responsive and full-view.
Since we are looking at the JS codes it is worth glancing over the default
example using parameter options. There are really only 2 function parameters
– the ID along with an object array of the different options. You may choose
none of them or any number but there are no required options. Here is a copy
of the sample code from the official homepage:
var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 400, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "after", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle

openPos: "relative", // String: Position of the opened nav, relative or static
jsClass: "js", // String: 'JS enabled' class which is added to <html> el
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
The final three options are callback functions which trigger after the
navigation has initiated, or been opened/closed by the user. This is a great
place to write your own codes for animations or updates on the page. These
options are ideal for advanced frontend developers who need to expand JS
functionality. But digging into a script and getting your hands dirty is also the
best way to learn.
Final Thoughts
I do hope this tutorial can help some developers who are struggling with their
own responsive navigation. The use of media queries is easy enough to
understand, but how do you go about creating a natural sliding effect? There
are still many other ways to handle this problem but Responsive Nav is small &
efficient enough for the task. Additionally if you have any questions or ideas
on the script feel free to share with us in the post discussion area.
Responsive Sliding Drawer Menu with Lightbox Effect
One popular navigation trend is the hidden sliding menu for large and small
screen displays. Some may call this a hamburger menu, side-toggle menu,
sliding drawer menu, or anything similar – but they all describe the same
interface. The menu is naturally responsive and saves on screen real estate by
hiding the navigation when you don’t need it.

I recently found an extraordinary example on the Comedy Central website
employing a dynamic sliding menu. In this tutorial I want to demonstrate how
to build a similar interface using jQuery. The menu will open and create a
lightbox effect to hide the main page content so visitors will focus solely on
the navigation. My demo is fully responsive and should work on any screen
size.
Building the Webpage

To get started I’ve created a blank HTML document along with an external
stylesheet. Also I’ve grabbed a local copy of the jQuery library to include in the
page.
<!doctype html>
<html lang="en-US">
<head>
<title>Responsive Hamburger Toggle Menu - Template Monster Demo</title>
<script type="text/javascript" src="js/hamburger-menu.js"></script>
</head>
But the real important stuff is located within the page body. Since we need a
lightbox/shadowbox to cover the page I’m wrapping everything into a
container with the ID#pgcontainer. This will be useful when sliding the entire
page over to make room for the menu.
<body>
<div id="pgcontainer">
<header>
<div id="navbar">
<a href="#" class="menubtn">menu</a>

<div id="hamburgermenu">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">About the Site</a></li>
<li><a href="#">Basic History</a></li>
<li><a href="#">Our Products</a></li>
</ul>
</div>
</div>
<div class="overlay"></div>
</header>
<div id="content">


</div>
</div>
</body>
Notice the page container even holds the navigation header along with the
sliding menu#hamburgermenu. A bit of padding along with the .overlay div
will ensure the menu is still clickable and located above the lightbox.
The nav links are kept in an unordered list and you could even include other
bits of HTML as well. Everything located within #hamburgermenu will display
to the left side when the menu opens. Otherwise it stays hidden using a 0px
width.
Also the only item within the header is a small button for toggling the menu.
I’m using a background icon to fill in text where screen readers just see the
word “menu”. This is a better solution than static images just to increase
visibility.
CSS Design
Moving into my stylesheet I’ve included a small collection of resets along with
the page structure.
header {
display: block;
width: 100%;
height: 52px;
background: #5186a8;
padding: 15px 10px;
}
#navbar {
max-width: 1000px;
margin: 0 auto;
.menubtn {
/* needs positioning for z-index http://stackoverflow.com/a/10600930/477958 */
position: relative;
z-index: 101;
color: #274a61;
font-size: 0em;
line-height: 0em;
top: 2px;
padding: 15px;
background-image: url('hamburger.png');
background-position: 50% 50%;
background-size: 25px 25px;
background-repeat: no-repeat;
.menubtn:hover, .openmenu .menubtn {
color: #bdd43e;
background-image: url('hamburger-active.png');
All of the content is centered using a maximum width of 1000px. Everything

can shrink smaller but this max limit keeps the page from expanding too wide
and looking stretched. Also notice the .menubtn link needs a z-index property
to keep it above the overlay.
When a user clicks to open the menu this overlay div will cover the page. The
only 2 ways to hide the menu would be clicking the button again, or clicking
somewhere on the lightbox overlay. Using a higher z-index value keeps the link
colorful and clearly visible above the page.
For the menu icon I’m using a standard three-bar design from Captain Icon, a
free open source webfont. I tried including the actual font files but this
created a weird rendering bug in Firefox. So the next best option would be to
edit the source and save as PNG background images.
/** toggle menu **/
body.openmenu {
position: fixed;
overflow: hidden;
#pgcontainer {
padding: 45px 0;
margin: 0;
.overlay {
position: fixed;
z-index: 99;
background-color: rgba(0,0,0,0.5);
bottom: 0;
right: 0;
left: 0;
.openmenu .overlay {
top: 0;
Once the menu opens jQuery will handle a number of tasks, one of which is to
append a new class onto the body element. With this class .openmenu the
body will stay fixed as you scroll down the navigation. The .overlay class also
uses a fixed position to stay on top of the body at all times.
This overlay div uses a position of 0px on all sides of the page. However we
don’t see the overlay appear until the menu opens and the extra class
.openmenu is applied onto the body.
#hamburgermenu {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
z-index: 101;
overflow: hidden;
-webkit-box-shadow: 3px 0 7px rgba(0,0,0,0.55);
-moz-box-shadow: 3px 0 7px rgba(0,0,0,0.55);
box-shadow: 3px 0 7px rgba(0,0,0,0.55);
#hamburgermenu ul {
margin-top: 45px;
z-index: 101;
overflow-y: auto;
overflow-x: hidden;
#hamburgermenu ul li {
display: block;
#hamburgermenu ul li a {
display: block;
min-width: 130px;
padding: 18px 8px;
color: #cdcdcd;
font-size: 1.45em;
font-weight: bold;
text-align: center;
#hamburgermenu li a:hover {
color: #fff;
background: #2c2c2c;
Lastly we come to the navigation which is somewhat self-explanatory if you’re

familiar coding in CSS. There is no set width in CSS so the menu could expand
as far as needed using jQuery. The nav links use a minimum width of 130px so
the menu doesn’t collapse into the text when being hidden from the page.
#hamburgermenu keeps the higher z-index property along with the three-bar
menu link. These are the only 2 elements not hidden beneath the page
overlay. Also notice how the nav list uses a hidden overflow on the x-axis(side-
to-side) with an automatic scrollbar on the y-axis(top-to-bottom). This means if
your nav links go beyond the page height you can scroll as if the menu were a
separate iframe.
Building the Nav with jQuery

I moved all the JS code into a separate file named hamburger-menu.js. It’s not
overly confusing but there are ~50 lines of code not worth mixing into the
HTML.
$(function(){
var menuwidth = 240; // pixel value for sliding menu width
var menuspeed = 400; // milliseconds for sliding menu animation time
var $bdy = $('body');

var $container = $('#pgcontainer');
var $burger = $('#hamburgermenu');
var negwidth = "-"+menuwidth+"px";
var poswidth = menuwidth+"px";
First we create a number of variables which are used throughout the script. I
previously mentioned the menuwidth being set dynamically. Also the
animation speed is adjustable by updating the menuspeed variable in
milliseconds.
The last few variables contain jQuery selector objects to save memory, along
with calculations for how many pixels to hide & show the menu.
$('.menubtn').on('click',function(e){
if($bdy.hasClass('openmenu')) {
jsAnimateMenu('close');
} else {
jsAnimateMenu('open');
});
$('.overlay').on('click', function(e){
if($bdy.hasClass('openmenu')) {
jsAnimateMenu('close');
});
$('a[href$="#"]').on('click', function(e){
e.preventDefault();
});
First take note that I’m referencing a custom function named jsAnimateMenu
which takes a parameter of ‘open’ or ‘close’. This is a simple technique to save
on excess lines of code. When the .menubtn is clicked jQuery checks the body
for an .openmenu class. The if/else logic determines whether the menu is
toggled open or closed.
Second I’m checking whenever a user clicks on the .overlay div, which is only
possible while it’s visible. If the user can click on that div it means the menu is
already open and the user wants to close it. My last event handler targets the
a[href$=”#”] selector.
Basically this prevents any links with the hash symbol from loading into the
browser URL, often causing page jumps. Feel free to remove this block when
customizing the script for your own website.
function jsAnimateMenu(tog) {
if(tog == 'open') {
$bdy.addClass('openmenu');
$container.animate({marginRight: negwidth, marginLeft: poswidth}, menuspeed);
$burger.animate({width: poswidth}, menuspeed);
$('.overlay').animate({left: poswidth}, menuspeed);
if(tog == 'close') {
$bdy.removeClass('openmenu');
$container.animate({marginRight: "0", marginLeft: "0"}, menuspeed);
$burger.animate({width: "0"}, menuspeed);

$('.overlay').animate({left: "0"}, menuspeed);
});
The primary function will use 2 sets of opposing animations based on whether
the menu is opening or closing. The container div will move the entire page
into negative space off to the right-hand side of the page. This creates a small
opening on the left for the navigation menu to slide into place.
Since most of the interface has been customized with CSS properties, jQuery is
only responsible for handling the animations. Everything else is managed
through CSS properties to ensure positioning and z-index values.
Many designers hold a contention against hamburger menus and try to avoid
them in website layouts and mobile apps. And I certainly can’t state this is the
perfect solution for every website.
But it’s entirely reasonable to use this design appropriately and still get a
clean user experience. It may be worthwhile to provide a non-JS solution along
with the sliding drawer if possible. Overall I’m quite fond of this navigation and
I hope my code can provide a template for other curious web designers.
Build a Custom CSS3 & jQuery Icon Font Dropdown Menu
Out of the many online form interfaces I’ve ever used, a dropdown icon picker
has been something that really caught my attention. The purpose is quite
generalized and you won’t always need something like this for every interface.
But lots of social media websites use icons for UI design, profiles, chat
messages, and similar page elements.
This tutorial will guide you through the process of creating a jQuery-powered
icon picker input field. The library is called fontIconPicker which is free and open
source to use in any number of projects. It’s a great choice because all the
fonts are completely free and you don’t even need to worry about rendering
issues. Take a peek at my live sample demo to see the final result.
Getting Started
First create a new HTML document and download a copy of the fontIconPicker
plugin right from Github. This includes a simple demo along with all the primary
files needed to setup a new icon picker. Also remember to download a local
copy of the jQuery library which is a prerequisite to get this plugin working.
<!doctype html>
<html lang="en-US">
<head>
<title>Icon Font Dropdown Menu - Template Monster Demo</title>
<script type="text/javascript" src="js/jquery.fonticonpicker.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.fonticonpicker.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/themes/grey-

theme/jquery.fonticonpicker.grey.min.css">
<link rel="stylesheet" type="text/css" media="all" href="fonts/fontello/css/fontello.css">

<link rel="stylesheet" type="text/css" media="all" href="fonts/icomoon/icomoon.css">
</head>
The first required materials are jquery.fonticonpicker.min.js along with a

stylesheet named jquery.fonticonpicker.min.css. You could alternatively use
the regular non-mini versions but I prefer minified copies since we don’t need
to directly edit the files. Fontello and IcoMoon are the 2 font libraries included
within the demo folder.
Traverse through the Github master directory and you’ll find all the crucial files
needed for this to work. Take a look at my header code snippet to see if you’re
missing anything. It’s very important to choose a theme from the themes
folder or you can just copy all of the themes if that would be easier. I’m using
the basic Grey theme because it looks good contrasted with a white
background.
<div id="wrapper">
<h1>Icon Picker Field</h1>
<div id="pickerui"><input type="text" class="trigger_change" id="iconpicker" name="iconpicker"></div>
<span id="iconcontainer">
<h2>Your Icon:</h2>
<span class="selected_icon text-danger"><i class="icon-block"></i></span>
</span>
</div>
The body content itself is pretty simple when there’s only a UI picker on the
page. My demo includes the actual dropdown icon picker along with an auto-
updating container which displays the currently selected icon. This works using
CSS content along with the HTML value of the icon, which is added dynamically
through jQuery. The classes like .selected_icon will be used later in the jQuery
code.
Page Design with CSS
Aside from my own custom styles there is very little to edit that hasn’t already
been created from the plugin code. You might consider redesigning your own
icon picker theme but it’s a hefty task. The actual fontIconPicker handles more
of the UI while the theme overwrites certain colors to match nicely with the
icons.
But the only CSS worth editing would be located in my styles.css stylesheet.
This includes a customized reset built off Eric Meyer’s template. The page
structure itself is very basic using a simple responsive formula:
#wrapper {
display: block;
background: #fcfcfc;
max-width: 650px;
min-width: 300px;
margin: 0 auto;
padding: 15px 20px;
border-radius: 5px;
#pickerui {
display: block;
text-align: center;
#iconcontainer {
display: block;
text-align: center;
#iconcontainer .selected_icon {
font-size: 9.0em;
#iconcontainer .selected_icon i {
color: #333;
The page wrapper maxes out at 650px wide and shrinks down to 300px
minimum. The central content should also shrink nicely and keep the icon
picker still within view(although not optimized for mobile screens it should
work in more advanced smartphone browsers).
Everything else is more about display and positioning. I’m trying to keep
everything centered on the page including the preview icon display. This icon
preview is sized to a 9.0em font size or 90px in the standard grid
measurement. If you like this dynamic preview try to mess around with colors
and style to see if it can match your own layout.
jQuery Icon Picker Menu

Finally towards the bottom of my HTML file we find the main JavaScript code
which implements the function call. fontIconPicker() takes a number of
parameters and sets up the initial field input. To handle a more customized
icon format I’ve copied some variables from the fontIconPicker demo file:
$(function(){
// variable icons list
var fnt_icons = {
'Web Application Icons' : ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled",

"icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-
attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-
download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"],
'Form Control Icons' : ["icon-search", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-

cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-
plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-
minus-squared-small", "icon-quote-right", "icon-code", "icon-comment-empty", "icon-chat-empty"],
'Media Icons' : ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export",

"icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"],
'Popular Icons' : ["icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-

alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-forward", "icon-quote-left", "icon-retweet", "icon-
keyboard", "icon-gamepad", "icon-comment", "icon-chat"]};
Believe it or not fnt_icons is actually one long jQuery object. Curly Braces like
this { } denote a new object variable. Inside the object we have key/value pairs
– the key is a string identifying the icon class and the data pair is an array with
straight brackets like this [ ]. Each array contains a list of strings which directly
relate to identical icon names in each set.
You could add or remove certain icons of your own choosing or even create
new categories. This is a more crude yet direct method of adding specific icon
choices into the UI. Another alternative would be to use pre-formatted icon
classes which cannot offer as much control, but does save on the amount of JS
code.
$('#iconpicker').fontIconPicker({
theme: 'fip-grey',
source: fnt_icons
}).on('change', function() {
var nextSpan = $('#iconcontainer'),
iconToChange = nextSpan.find('.selected_icon'),
selectedIcon = $(this).val();
if(selectedIcon == '') {
iconToChange.html('<i class="icon-block"></i>');
iconToChange.removeClass('text-primary').addClass('text-danger');
} else {
iconToChange.html('<i class="' + selectedIcon + '"></i>');
iconToChange.addClass('text-primary').removeClass('text-danger');
});
});
The only 2 options I’m passing into the function would be the icon object list
and the UI display theme. A chained method .on() runs a function whenever a
user changes the value of this input. The font icon picker will return a value
saved to the variable selectedIcon which can be used to display the icon in
CSS. If there is no value the script resets and displays the circular cancel icon.
All-in-all it’s a pretty straightforward script that could utilized with any number
of web fonts. All you need to do is include the actual font files along with the
related CSS into your document header. Then just list out which icons you want
to use with the source option like I did in this example. Check out the related
plugin documentation to learn more.
This type of interface can’t always be useful on every web project. But I love
seeing web developers push the boundaries on what is possible with simple
front-end techniques. Since this plugin is also free it adds that much more
value to clients and developers alike. This tutorial is also 100% free so you can
download and customize my sample code to your valiant heart’s content!
How to Code a Fixed Auto-Hiding Nav Bar with JavaScript
Top navigation bars have always been popular in web design. Since these
elements contain such vital information some designers like to keep them
fixed on-screen while scrolling down the page. But unfortunately this can get
in the way of content if the bar is too large. A popular online blogging
platform Medium created an interesting method of hiding the bar when
scrolling down and re-showing it when scrolling back up.
In this tutorial I want to demonstrate how you can achieve this effect on your
own website. I’ll be using Headroom.js which is a free open source JavaScript
library and jQuery/Zepto plugin. The effect requires a bit of custom CSS along
with a small block of JS code. Take a peek at my live demo to see the final
result.
Getting Started
First we need a local copy of the Headroom.js script which you can download
from the plugin website or from the Github repo. I’m using the minified
version but they both contain the same exact code. Now the initial setup
requires a fixed header bar which stays on top of the page using basic CSS
properties.
I’ve created a new stylesheet named styles.css along with a primary HTML
document. Everything is included into the document header like so:
<!doctype html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width">
<title>Auto-Hiding Navigation Bar - Template Monster Demo</title>
<script type="text/javascript" src="js/headroom.min.js"></script>
</head>
Then within the page body I have two primary sections. The first is a large
navigation bar with an internal wrapper for the content. The page content s
broken into another div using the same wrapper class. This allows everything
to be responsive and resize based on the browser width.
<header id="header" class="header fixed">
<div class="wrap">
<div class="clearfix" style="width:100%;">
<div id="logo">SomeLogo</div>
<ul id="navmenu">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">About Us</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</div>
</div>
</header>
<div id="content">
<div class="wrap">
<h1>What's it all about?</h1>
...
</div>
</div>
The actual header element using the ID #header is most important here. This
will stay fixed on the layout and naturally scroll down with the user. #header is
targeted using JavaScript to add the headroom function, but the .fixed class is
where we get all the natural CSS positioning.
CSS Setup
This stage can get a little confusing but I hope to simplify as much as possible.
The Headroom plugin requires a large amount of CSS, but unfortunately this
isn’t clarified on the plugin’s homepage. My demo CSS file is split into different
code sections and towards the bottom you’ll find a whole bunch of animations
and keyframes using CSS3 properties.
In order to get your page working you should copy this CSS into your own
stylesheet. Various classes pertain to different animations where the header
bar will slide up out of view or slide down into view.
.wrap {
display: block;
margin: 0 auto;
max-width: 800px;
padding: 0 10px;
}
#content {
padding: 110px 0;
}
#header {
display: block;
width: 100%;
height: 80px;
background: #4e5f81;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
}
.fixed{
position: fixed;
z-index: 10;
right: 0;
left: 0;
top: 0;
}
In this first block I’ve outlined each critical element of my page. .wrap is a
responsive wrapper that contains the header and page body content. Also
remember the #header ID only adds design properties onto the navbar –
.fixed is what creates the auto-scroll positioning.
#navmenu {
display: block;
float: right;
}
#navmenu li {
display: block;
float: left;
}
#navmenu li a {
display: block;
float: left;
padding: 0 20px;
font-size: 1.4em;
line-height: 80px;
font-weight: bold;
color: #fff;
}
#navmenu li a:hover {
}
/** simple responsive updates **/

#navmenu li a { font-size: 1.2em; padding: 0 15px; }
#logo { font-size: 2.1em; }
h1 { font-size: 2.7em; }
p { font-size: 1.6em; }
}
Afterwards I’m aligning the various navigation items in the unordered list. You
may not need these properties if your header already has navigation setup.
Also my custom responsive CSS will adjust font sizes based on various screen
displays.
Just beyond these responsive codes you’ll notice a huge section of CSS
delimited by the comment line /** headroom.js animated styles **/.
Everything beyond that comment should be copied into your own CSS file,
aside from the clearfix classes which are just typical float resets.
I’ve tried to organize each section by breaking them up with CSS comments.
Headroom’s CSS is the most extensive yet necessary part of the whole setup.
In the future I hope these codes may be added into a separate file in Github
because I wasn’t able to create the auto-hiding header effect without these
animation codes.
Headroom JS Method
Moving back into the HTML file open a new script tag at the very bottom
before closing the body section. We need to use a large block of JS to initialize
the Headroom plugin class while passing some optional parameters.
var header = document.querySelector("#header");
new Headroom(header, {
tolerance: {
down : 2,
up : 5
},
offset : 100,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}).init();
The header variable targets the initial #header ID and stores this element to
pass into the Headroom method. This element is all we actually need to
initiate the plugin, but some optional parameters allow you to customize the
effect.
The first option tolerance is one of two object literals in this set. Basically it
takes a list of key/value pairs and passes them into the function or method.
The numeric values represent scrolled pixels before the header should re-
appear or disappear. So for example once the header slides out of view the
user needs to scroll 5px up before it slides back into view.
offset denotes how many pixels from the top should be scrolled before the
header initially hides off the screen. This value is important because you may
want to adjust based on the size of your own website’s header. The following
classes option use object literal notation with more key/value pairs.
It’s probably easiest to leave these classes alone because they relate directly
to the CSS block of animation effects. If you decide to change any of these
values be sure to update the class names in your CSS file too.
Closing
Not everyone likes these fixed headers but it seems like the trend is here to
stay. This design can be effective when implemented properly. Make sure
there’s always enough space in the layout for free scrolling and readable text.
Also be sure not to hide any content at the top of the page – a little extra
padding is a good idea. Feel free to download my sample code and try building
this into your own web projects.
Coding a Mobile-Responsive Website Layout Using
Footer Navigation
There are so many different techniques for managing a mobile responsive

website. Obviously the common issues pop up time-and-time again. Things like
sidebars, navigation menus, and bigger pieces of content like video streams.
Designers are constantly trying out new methods for handling these interface
features.
The idea for navigation design is to duplicate your nav menu within a hidden
footer block. Once the user resizes their browser window is small, it will
replace the top nav with a menu link, jumping down to the new footer
navigation. This will be visible right away on smaller devices like smartphones.
It is a solution which requires no JavaScript and that is quite enticing to some
web developers. Take a peek at my live sample demo to get an idea of how this
works in a realistic website layout.
Getting Started
Overall the technique really doesn’t require a whole lot of code. What you
need to understand is the premise behind why we are doing this, and how it
translates into any other typical website. Generally I feel this technique works
best if your menu contains less than 15-20 links. It can get crowded very
quickly, especially by including multiple sub-menu links.
<!doctype html>
<html lang="en-US">
<head>
<title>Responsive Layout with Footer Navigation - Template Monster Demo</title>
</head>
The webpage header only includes a reference to my external stylesheet.

Within CSS we can organize media queries for updating the navigation menu
beyond a certain resolution. This will change based on your own layout, so
keep this in mind throughout the tutorial.
In the page body I have split up each internal section based on the contents.
We have a large header with the top page navigation, followed by some inner
content and a footer area. Within the footer I’ve contained a hidden navigation
which only displays using media queries. Obviously we could include other text
which never gets hidden, such as copyrights or attribution. This technique is
very flexible because we choose what gets hidden and how it’s displayed
properly.
<div id="w">
<header>
<nav id="navbar">
<ul class="clearfix">
<li><a href="#">Services</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<a href="#footnav" id="footnavlink">Menu</a>
</header>
<section id="content">
<h1>Responsive Footer Navigation</h1>
<p>Page content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
....
</section>
<footer>
<nav id="footnav">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</footer>
</div>
I went and removed a lot of the inner page body since it doesn’t affect the
code at all. You will see in the top page header there is also a small link using
the ID #footnavlink. I keep this hidden by default using CSS display: none and
it’s meant to provide immediate access to the footer menu. Some designers
choose to keep this link fixed at the top of the page, but it’s not always the
best idea when you have a lot of inner content with very small screen real
estate.
Page Design Styles
First I want to check out the overall design for the page before jumping into
media queries. I have the entire block wrapper situated in the center using
max-width and min-width. This keeps everything flexible without requiring a
percentage-based value. I also have a small imported web font Cherry Swash
hosted by Google.
@import url('http://fonts.googleapis.com/css?family=Cherry+Swash:400,700');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
html { overflow-y: scroll; }
body {
background: #f7f7f7 url('../images/bg.png'); /* http://subtlepatterns.com/fresh-snow/ */
font-family: Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #666;
padding: 30px 15px;
padding-bottom: 175px;
h1 {
font-family: 'Cherry Swash', Tahoma, sans-serif;
font-size: 4.1em;
line-height: 1.75em;
text-align: center;
p{
display: block;
font-size: 1.45em;
line-height: 1.4em;
color: #515151;
a { color: #7ca9d8; }
a:hover { color: #98bde2; }
#w {
background: #fff;
max-width: 820px;
min-width: 300px;
padding: 15px 18px;
margin: 0 auto;
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 2px 4px rgb(0,0,0,0.3);
#content {
padding: 0 15px;
Moving down more into the file I’ve devoted a section for handling the top
navigation and the footer nav menu. Remember that these should contain
identical links if you want visitors to have access to the same pages regardless
of screen size. But you may also choose to hide sub-links until the visitor has
navigated onto the parent page(just to save room).
** navigation **/
#navbar {
display: block;
width: 100%;
height: 40px;
font-size: 1.4em;
text-align: center;
#navbar ul { display: block; margin: 0 auto; padding-bottom: 7px; border-bottom: 1px solid #ddd; }
#navbar ul li { display: inline-block; }
#navbar ul li a {
display: inline-block;
line-height: 35px;
padding: 0 10px;
color: #727f8c;
text-shadow: 1px 1px 0 #fff;

font-weight: bold;
#navbar ul li a:hover {
color: #8d99a6;
background: #eaf0f6;
#footnav { display: none; border-top: 1px solid #ddd; }
#footnav ul {
#footnav ul li { display: block; width: 100%; border-bottom: 1px solid #eee; }
#footnav ul li a {
display: block;
width: 100%;
color: #727f8c;
text-align: center;
padding: 15px 10px;
font-weight: bold;
font-size: 1.4em;
text-shadow: 1px 1px 0 #fff;
#footnav ul li a:hover {
color: #8d99a6;
background: #eaf0f6;
#footnavlink { display: none; }

Each display property on #footnav and #footnavlink are set to none. They
will still appear as part of the DOM but won’t take up space on the page itself.
We update this using @media queries for the device screen width. I have the
value set at a maximum width so anything at that point or lower will trigger
our responsive footer nav.
Responsive Media Queries

I have only written a single breakpoint for changing the navigation menu style.
This happens once the window becomes 550px or smaller. At this point I am
forcing the #navbar container to an automatic height value – as opposed to
the fixed 40px I set earlier.
#navbar {
height: auto;
#navbar ul { display: none; }
#footnavlink {
display: block;
padding: 15px 25px;
background: #7391af;
color: #fff;
text-align: center;
font-size: 1.4em;
font-weight: bold;
#footnavlink:hover { background: #84a0bd; }
#footnav { display: block; }
}
I specifically allocated the CSS styles for these bottom links to be displayed
once they are visible. We could have appended all of these properties onto the
links themselves, and then updated with a display value so they appear in the
webpage. Either way is fine and typically it won’t matter unless you notice
bugs in certain web browsers.
You can easily see how this technique would be implemented for any common
webpage. Responsive footer navigation menus are one of the easiest solutions
aside from just re-scaling the nav menu smaller. Responsive web design has
grown into a huge topic that is certainly advancing with new trends every year.
This design could be thought of as a bare template for building your own
custom responsive footer navigation.
Closing
I know there are so many techniques for responsive design, it is tough picking
a single choice which makes sense. I truly love studying design trends and
mobile responsive navigation has been advancing for years. This tutorial offers
a method for quick & efficient navigation to handle traffic from mobile
devices. Feel free to download a copy of my source code and try implementing
this nav solution into your own web projects.
Webpage Scrolling Animation Effects with CSS3 & jQuery
A bit of website animation can be fun and enticing to new visitors. Modern
web design has opened doors to allow greater effects to be accomplished with
fewer lines of code. Animated page elements do not offer major alterations on
content, but can provide a more extraordinary user experience.
In this tutorial I want to demonstrate how to build UI elements which animate

into view as the user scrolls down the page.The animation transitions will be
accomplished using CSS3 while scrolling is detected using jQuery. This
combination allows a more even split of code, and one day we might even be
able to port this over to a pure CSS effect. Take a peek at my live demo to see
the finished product.
Getting Started
I’ve included a local copy of the jQuery library along with a CSS stylesheet. All
of the animations will be written into CSS using class names, while jQuery will
handle the scroll trigger.
Inside the body section I’ve wrapped all the content into a #wrapper div which
is centered on the page. Since only specific elements will be animated we can
wrap those into separate div sections using more unique classes.
<body>
<div id="wrapper">
<h1>Animated Scroll Effects</h1>
<p class="desc">Continue scrolling down to see the magic.</p>
<p class="desc">Animated blocks use CSS classes to setup direction and flow of each item.</p>
<br><br><br><br>
<div class="animateblock centerleft">
<img src="img/macbook-laptop.png" alt="macbook icon">
</div>
This block of code includes the very first animated div which displays a small
MacBook icon. Each animated section will use the class .animateblock. This
doesn’t have to be a div element, but it helps to apply the animation onto a
container rather than a single paragraph or img tag.
Also the second class name will affect how the object animates into view. By
default.animateblock will just fade the opacity up from 0% to 100%. But using
margins and other properties we can easily rearrange elements to work into
the page from a specific direction. For example this first block uses .centerleft
which centers the icon while animating in from the right side over to the left.
Other animated divs follow a similar setup with <br> tags adding extra space
for scrolling room.
Let’s delve into the stylesheet to see how these animated classes work.
CSS Design & Animation

The page itself has a number of typical resets based off the Eric Meyers reset
code snippet. I’m also using a dark tiled background to provide more contrast
on the page. Naturally these effects can work with any style and should not be
limited to one type of page structure or color scheme.
/* animated elements */
.animateblock {
padding: 8px 0;
color: #fff;
opacity: 0;
-webkit-transition: all 0.55s linear;
-moz-transition: all 0.55s linear;
transition: all 0.55s linear;
.animateblock.animated {
opacity: 1;
.animateblock is the absolute bare necessary class to get any HTML object
animating into view. jQuery will target each element using this class and check
when it should be animated. To actually make the animation happen we use an
additional class .animated.
Take note how the original animate block uses the CSS3 transition property,
along with some related browser prefixes. This will transition every unique
property once the .animated class is added onto the element – meaning you
could even create your own additional classes for new animation effects.
/* animation transition styles */
.animateblock.left {
margin-left: -2%;
.animateblock.left.animated {
margin-left: 12%;
.animateblock.right {
display: block;
margin-left: 100%;
.animateblock.right.animated {
margin-left: 70%;
.animateblock.top {
display: block;
width: auto;
text-align: center;
margin-top: -25px;
.animateblock.top.animated {
margin-top: 0px;
.animateblock.btm {
display: block;
width: auto;
text-align: center;
margin-top: 25px;
.animateblock.btm.animated {
margin-top: 0;
.animateblock.centerleft {
display: block;
width: auto;
text-align: center;
margin-right: -10%;
.animateblock.centerleft.animated {
margin-right: 0;
.animateblock.centerright {
display: block;
width: auto;
text-align: center;
margin-left: -10%;
.animateblock.centerright.animated {
margin-left: 0;
.animateblock.center {
margin-left: 2%;
.animateblock.center.animated {
margin-left: 42%;
}
.animateblock.size {
display: block;
width: 10%;
text-align: center;
.animateblock.size.animated {
width: 100%;
height: 100%;
.animateblock.size img {
max-width: 100%;
height: auto;
Each class is broken up into a section of the primary class(like .left) along with
the final animated class(like .left.animated). Only one of these classes should
be added onto the animated div to get the additional effects. You can animate
in from the top or bottom, left or right, even moving into the center by
resizing the div as it comes into view. Not all CSS properties support transition
effects so you’ll have to try out ideas to see what works best.
Scroll Trigger with jQuery

The last bit of code to get this script working can be found at the bottom of
my HTML file. jQuery needs access to some crucial information, most notably a
list of each .animateblock element to cycle through. Each animation will
trigger once a user has scrolled to the point where an element is 3/4 of the
way down the window. It’s not too confusing but let’s break into each piece of
logic.
$(function(){
var $elems = $('.animateblock');
var winheight = $(window).height();
var fullheight = $(document).height();
$(window).scroll(function(){
animate_elems();
});
First I’m setting up a few global variables. $elems is a jQuery object containing
all the matched elements queued for animation. winheight pulls the browser
window’s height and fullheight pulls the entire webpage’s height, both values
in pixels.
Next I’m running a new function on the jQuery .scroll() event handler. Each
time a user scrolls we’re calling a separate function named animate_elems().
This is where all the logic happens and where it’s determined at what point to
apply the .animated class onto each element.
function animate_elems() {
wintop = $(window).scrollTop(); // calculate distance from top of window
// loop through each item to check when it animates
$elems.each(function(){
$elm = $(this);
if($elm.hasClass('animated')) { return true; } // if already animated skip to the next item
topcoords = $elm.offset().top; // element's distance from top of page in pixels
if(wintop > (topcoords - (winheight*.75))) {
// animate when top of the window is 3/4 above the element
$elm.addClass('animated');
});
} // end animate_elems()
});
Inside here we pull a new value for wintop each time the user scrolls. This will
hold a total pixel value offset from the very top of the page. This value is
useful to check out the visitor’s distance from the next animated page
element.
$elems.each() uses the jQuery .each() loop to run through the targeted
element. Before crunching any numbers we first check each element’s class to
see if it’s already using .animated. If so then we return true which will move
right along to the next item. Once every element has been animated the
function won’t need to perform any more calculations.
But if the currently-targeted element has not animated then we need to see if
it should animate.topcoords is a variable containing the offset pixel value of
the specific element’s position from the top of the page. Each animated div
will have a different px coordinate, so it’s important we loop through each one
separately.
The final bit of logic may seem confusing but it makes plenty of sense once
you understand how it works. Here’s how the if{} logic is written: wintop >
(topcoords – (winheight*.75))
wintop checks the pixel value of the user’s current scrolled position. If it’s
greater than topcoordsthen we’d know the targeted div is right at the top of
the screen – this is a little too late to be animating something. Instead we need
a smaller number which equals just about 75% of the page height. So to get
this value I’ve taken the window’s height multiplied by .75, and this number is
subtracted from the element’s position.
Now the logic will check for when the user’s scroll position is just around the
element’s position at the lower 25% of the page. The visitor’s position will still
be at the “top”, but subtracting 75% of the window height creates this new
boundary. You might even try changing that .75 value to something like .6 or .8
just to see how this affects each animation.
Closing
There are some nice alternative plugins you could try out which build
animation effects solely in jQuery. Many of these plugins are much larger but
they offer more dynamic effects which are supported in a wider array of
browsers. Yet CSS3 is growing more popular with each passing month and it’s
certainly not phasing out anytime soon. Feel free to download a copy of my
source code and try building your own animated effects into future web
projects.
Hidden Flyout Shopping Cart Menu with CSS3
For every modern eCommerce website the shopping cart is a crucial feature.
Most of the time visitors will have to click a link or button to view all the items
in their cart. This is a much cleaner solution because everything can be listed
on the page without sacrificing extra information.

For this tutorial I want to demonstrate how to build a simple hidden flyout
shopping cart menu with CSS3 animation. I got the idea from a related
WooCommerce cart menu plugin which has extra features for a flyout menu. A
small tab will appear over to the side and once a user hovers this tab it will
flyout onto the page. This is not a full cart display but it does offer a quick
peek for curious shoppers. Take a look at my sample demo to see the final
result.
Getting Started with Our Shopping Cart Menu Tutorial
Although we don’t need any extra dependencies I did include a copy of jQuery
to stop blank HREF links from loading. You do not need jQuery to make the
flyout menu effect – I’m just using it for my demo. Aside from that I have a
separate CSS file included into the page structure.
Within the page body I have a div with the ID #wrapper. This contains all of the
page content including the tabbed shopping cart. Truthfully you could place
that HTML code anywhere since it will be using absolute CSS positioning. I find
that it’s best to keep all the page elements in order so that they’re easier to
edit.
<div id="wrapper">
<div class="cart-tab visible">
<a href="#" title="View your shopping cart" class="cart-link">
<span class="amount">$22.00</span>
<span class="contents">2 items</span>
</a>
<div class="cart">
<h2>Cart</h2>
<div class="cart-items">
<ul>
<li class="clearfix">
<img src="img/dark-clean-hoodie.jpg" class="productimg">
<h4>Dark Hoodie</h4>
<span class="item-price">$11.00</span>
<span class="quantity">Quantity: 1</span>
</li>
<li class="clearfix">
<img src="img/spongebob-nike-shoes.jpg" class="productimg">
<h4>SpongeBob Shoes</h4>
<span class="item-price">$11.00</span>
<span class="quantity">Quantity: 1</span>
</li>
</ul>
</div>
< a href= "#" class= "checkout"> Go To Checkout →</ a>
</div>
</div>
My first block of code includes everything needed for the tabbed cart menu.
The .cart-tab class will contain everything including the hover link and
contents. Internally .cart-link is the hoverable tab which creates the animation
effect.
Another block using the class .cart will hold all the items. I’ve only added two
products as an example, but the flyout could probably display 3 or 4 different
items. At some point you’ll reach a number that looks too big for the screen
and defeats the purpose of this flyout. But notice how you could include a
total number of items along with a few sample items(perhaps most recently
added products).
Beneath this block of code I have a page body which includes a few larger
sample products. These extra items do not affect the flyout menu – I just
added them because it makes the page look bigger. The code itself is quite
simple but definitely not required.
Designing the Page

Moving right along into my stylesheet let’s take a peek at how the page is
setup and how the animation unfolds. I am using a number of CSS resets to
style a generic page with traditional margins/padding along with equalized
font sizes.
After these resets I have a few properties for the page wrapper and the
internal product listing. The ID for #productlist is a container which targets
the overall list.
** page structure **/
#wrapper {
display: block;
width: 850px;
background: #fff;
margin: 0 auto;
padding: 25px 30px;
border-radius: 4px;
#productlist {
display: block;
#productlist li {
display: block;
float: left;
#productlist li img {
display: block;
float: left;
margin-right: 10px;
}
#productlist li .details {
display: block;
float: left;
width: 180px;
As I mentioned before these product list items do not have any effect on the
flyout menu. But most eCommerce shops will have a general product listing
which includes a thumbnail shot along with related information.
CSS3 Animation
Beneath that block of code I’ve added my flyout menu properties. .cart-tab is
the overall container class which uses position: fixed to keep it scrolling along
with the page. I’m using CSS3 transition properties to animate the menu out
from offscreen.
/** flyout menu **/
.cart-tab {
width: 22em;
position: fixed;
top: 5em;
z-index: 9999;
background: #fff;
right: -22em;
-webkit-transition: right ease .5s;
-moz-transition: right ease .5s;
-o-transition: right ease .5s;
transition: right ease .5s;
.cart-tab a.cart-link {
position: absolute;
top: 0;
left: -9em;
width: 8.6em;
display: block;
background: #fff;
padding: 1.8em;
-webkit-transition: left ease .5s;
-moz-transition: left ease .5s;
-o-transition: left ease .5s;
transition: left ease .5s;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
.cart-tab a.cart-link:after {
content: "";
display: block;
position: absolute;
top: 0;
right: -10px;
width: 10px;
height: 100%;
background: #fff;
.cart-tab:hover { right: 0; }
The container class .cart-tab has a width of 22em along with a left position of
-22em. It forces the entire menu completely offscreen and out of view
regardless of the window size. Then the actual link is moved left by -9em to
just peek out from the side. Once a user hovers over this link it starts the
transition effect by animating completely into view.
I should mention that CSS3 makes the animation simpler but it’s also not
supported by all browsers. jQuery animation works in a similar way by
animating CSS properties, thus it would be simple to translate this effect into
JavaScript. But I find the CSS3 code to be cleaner and moving towards a more
advanced method of frontend web development.
The rest of my code simply targets internal elements of the cart. These are
individual items along with relevant context like titles and links. At the bottom
of the flyout cart you’ll notice a link that reads “Go To Checkout”. In my demo
the link doesn’t work but for a live website this can be the best solution to get
customers closer to paying for their items.
cart-tab a.cart-link .amount {
display: block;
color: #515151;
font-size: 1.5em;
line-height: 1.7em;
font-weight: bold;
margin-bottom: 8px;
.cart-tab a.cart-link .contents {
display: block;
color: #666;
font-size: 1em;
.cart-items { display: block; margin-bottom: 25px; }
.cart-items ul { display: block; list-style: none; }
.cart-items ul li { display: block; margin-bottom: 8px; padding-bottom: 10px; cursor: pointer; border-bottom: 1px
dotted #888; }
.cart-items ul li .item-price, .cart-items ul li .quantity { display: block; margin-bottom: 2px; font-size: 1.1em; }
.productimg { display: block; float: left; margin-right: 8px; }
.cart-tab .cart { padding: 1.5em; margin: 0; }
.cart-tab .cart .checkout {
font-size: 1.2em;
padding: 4px 11px;
border: 1px solid #467fc5;
color: #467fc5;
font-weight: bold;
text-align: center;
border-radius: 4px;
.cart-tab .cart .checkout:hover { background: #467fc5; color: #fff; }
.cart-tab a.cart-link,.cart-tab .cart {
-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
-o-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
.cart-tab .cart {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
All the other styles are relatively aesthetic by adding borders, big text, box
shadows and rounded corners. Some of these features would be more useful
on a live website but presentation is still a big factor when it comes to user
experience design.
I also mentioned that my demo includes a small bit of jQuery to stop links from
loading with hashed HREF values. Definitely useful when creating a wireframe
or quick mockup for the site, but perhaps not as useful if your links will
actually lead somewhere. Feel free to remove that block of jQuery when
copying my source code into your own project.
Closing
This effect would really spruce up the user experience of an eCommerce
shopping page. Users get a quick glimpse at their cart and the animation is
very smooth. Take a look at my sample demo and please feel free to download
a copy of the project source code. This makes an excellent addition to any
eCommerce project to enhance the digital shopping experience.
Hidden Social Media Sharing Popup Bubbles with jQuery
Tutorial
Social media is a big deal to almost every company. With proper branding you
can turn a social media account into an enormously marketable asset. This is
why large companies such as Facebook can attract so many investors – because
people want to connect and share information digitally. But a regular-old
embedded social media sharing button can get rather stale, so I say we spice
things up a bit.
In this social media sharing bubbles tutorial I’d like to demonstrate how to
create a popup bubble with social media widgets. The bubble is displayed
through jQuery and can hold any number of widgets from Twitter, Instagram,
Facebook, YouTube, etc. Take a peek at my live demo to see the final design in
action.
Getting Started
First create a new HTML document and make folders for the CSS and JS files.
My stylesheet is named styles.css but choose any filename you like. Also grab
a local copy of jQuery and include that into the header as well.
<!doctype html>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
Inside the page body things get a little messy. I have a single outer container
with the ID#wrapper centering all the content. Then I’ve created an overall
container for the social media links using the class .social-links. Each link is
actually a social media icon from the free Metro Uinvert icon set.
Since the icon links are positioned next to each other I have them floating
within the .clearfixcontainer. This is very important to ensure that further
page content is cleared properly.
< !-- @end #wrapper →
Look at each individual section and you’ll notice two classes on each container.
For example the first Twitter widget has a class of .glyph and .twitter. The
glyph class sets a general default for each link such as padding and spacing.
The secondary class is used to impose a specific link background icon.
The .glyph container has two separate items. First is the popup div which is
originally hidden from the page. This uses the class .bubble and is found
alongside an anchor link with no text. These links use a background icon to
represent social media websites and the icon color changes while hovering.
One other thing you might notice is the addition of a .wide class on the
Facebook bubble. Since the “Like” button is kinda long I created two different
popup bubble classes – one that’s regular-sized and another that’s slightly
wider. If you want to increase the size you can always recreate your own
extended popup backgrounds.
Designing with CSS

Moving onto CSS I’ll explain how the page is organized and positioned. All
images are stored within the “css” folder because each one is used as a CSS
background. This makes resource management a whole lot easier in the long
run.
To get started I’m using a slightly customized CSS reset from the Eric Meyer
template. For the body background I’m using the Cream Dust tile from Subtle
Patterns.
#wrapper {
display: block;
max-width: 700px;
min-width: 350px;
margin: 0 auto;
padding: 20px 0;
/** social links **/
.social-links {
display: block;
width: 250px;
padding-top: 100px;
margin: 0 auto;
}
The outer wrapper should be self-explanatory as a general container. The inner
.social-linkscontainer houses the link icons and centers them on the page.
.glyph {
display: block;
position: relative;
float: left;
width: auto;
height: auto;
margin-right: 2px;
padding: 3px 6px;
height: 35px;
width: 52px;
.glyph.active {
background: url('bubble-sm.png');
background-position: -9px 40px;
.glyph .bubble {
display: none;
width: 140px;
height: 89px;
position: absolute;
margin: 0;
text-align: center;
background: url('bubble-sm.png');
padding: 20px 20px;
bottom: 35px;
left: -9px;
cursor: pointer;
.glyph .bubble.wide {
width: 160px;
left: -6px;
background: url('bubble-wide.png');
Now when it comes to the .glyph class there’s a lot to consider. Notably I’m
using relative positioning because the glyphs need a particular spacing and the
inner popup bubble is positioned absolutely. Having this popup bubble located
relative to the icon glyph is the easiest solution.
If you check out the general .bubble class you’ll notice I’m using a background
image for the drop shadow effect. This is easier because CSS would force a
solid rectangle which means hovering next to the link would also open the
menu. Instead I have the image split into two areas so the link icon and the
popup window meet to create a seamless BG.
.glyph a {
display: block;
position: relative;
height: 33px;
width: 40px;
.glyph.twitter a {
background: url('twitter-grey@2x.png');
top: -4px;
left: -1px;
}
.glyph.twitter.active a {
background: url('twitter@2x.png');
.glyph.twitter .bubble {
padding-top: 28px;
padding-left: 24px;
.glyph.facebook a {
background: url('facebook-grey@2x.png');
top: -4px;
left: -1px;
.glyph.facebook.active a {
background: url('facebook@2x.png');
.glyph.facebook .bubble {
padding-top: 30px;
.glyph.dribbble a {
background: url('dribbble-grey@2x.png');
top: -4px;
left: -1px;
.glyph.dribbble.active a {
background: url('dribbble@2x.png');
.glyph.dribbble a.dbfollow {
width: 85px;
height: 36px;
background: url('db-follow-grey@2x.png');
.glyph.dribbble a.dbfollow:hover {
background: url('db-follow@2x.png');
.glyph.dribbble .bubble {
padding-top: 30px;
padding-left: 30px;
Lastly we come to the icon styles which are created using specific classes. Each
icon style has two different effects: the original icon and the hovered icon. The
hover effect just adds color into the icon but it’s still located in the exact same
spot.
Also I’m using @2x retina images so each icon should look crisp on Retina
MacBooks and Hi-DPI smart devices.
Animating with jQuery

Moving back into the HTML file I’ve added a small block of JavaScript at the
bottom of the document. Everything is written in jQuery and uses the .on()
event handler function.
$(function(){
$('.glyph').on('mouseover', function(e){
$(this).addClass('active');
$(this).find('.bubble').css('display','block');
}).on('mouseleave', function(e){
$(this).find('.bubble').css('display','none');
$(this).removeClass('active');
});
});
By creating a selector from the .glyph class I can run a function on each icon.
With jQuery I can actually chain two functions together – one on mouseover
and the other on mouseleave.
So when the user hovers onto an icon we give that div the .active class. Divs
love active classes.
This should replace the grayscale background icon with a fully-colored version.
Then using the.find() method I’m selecting the first child with a class of
.bubble and forcing a display: block onto the element.
Once the user’s mouse leaves the icon or popup bubble then both of these
actions are reversed. So the .active class is removed and the bubble is once
again hidden from the page. This effect could be accomplished using pure
CSS3 but it wouldn’t have as much support in older browsers. I really like the
jQuery solution and it works perfectly.
Closing
The popup bubble effect is quite enjoyable and it works great in almost any
type of website from portfolios to major corporations. The goal is to save
space on the screen and offer more than just a link to your social profile. If the
user wishes to click the link icon they can check your profile – but in this case
the user is given an option of sharing your content as well. Feel free to
download a copy of my source code and see if you can fit this into any future
web design projects.

CPP Coding Standards 101

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CPP Coding Standards 101

Загружено:

Авторское право:

Доступные форматы

Foreword

1. Navigation & Search

Website search is one of the most commonly-expected features in modern

Demo – Download Source Files

<meta http-equiv="Content-Type" content="text/html">

<title>Toggleable Search Form - Template Monster Demo</title>

<meta name="author" content="Jake Rocheleau">

<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">

<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">

<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">

<link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<li class="threebar"><a href="#"><i class="fa fa-bars"></i></a></li>

<div class="searchlink" id="searchlink">

<i class="fa fa-search"></i>

<input type="text" class="s" id="s" placeholder="keywords...">

<button type="submit" class="sbtn"><i class="fa fa-search"></i></button>

CSS Design Style

.navigation li.threebar a { position: relative; padding: 0 30px; }

.navigation li.threebar a:hover {

.searchlink.open > .searchform {

/** search field **/

padding: 8px 11px;

/** media queries **/

@media screen and (max-width: 515px) {

.navigation li.threebar { display: block; }

jQuery Event Handlers

var $searchlink = $('#searchlink');

var target = e ? e.target : window.event.srcElement;

Live Demo – Download Source Files

<meta http-equiv="Content-Type" content="text/html">

<title>Color-Coded Dropdown Nav Menu - Template Monster Demo</title>

<meta name="author" content="Jake Rocheleau">

<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">

<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">

<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<ul id="menu" class="clearfix">

<li><a href="#">The Team</a></li>

<li><a href="#">Our Mission</a></li>

<li class="purple"><a href="#">Design</a>

<li class="green"><a href="#">Writing</a>

<li class="aqua"><a href="#">Accounting</a>

<li><a href="#">Asset Management</a></li>

<li class="red"><a href="#">Marketing</a>

<li><a href="#">Social Media</a></li>

<li class="blue"><a href="#">Development</a>

<li><a href="#">Ruby on Rails</a></li>

<li class="gold"><a href="#">Photography</a>

Designing with CSS

/** page structure **/

#menu li a:hover, #menu li a.active {

-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);

-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);

box-shadow: 0 2px 7px rgba(0,0,0,0.45);

#menu li ul.expanded li { margin-right: 200px; }

#menu li ul li ul li a { color: #fff; }

#menu li ul li ul li a:hover { text-decoration: underline; }

#menu li ul li.purple ul { background: #4f4c83; }

#menu li ul li.green ul { background: #65834c; }

#menu li ul li.aqua ul { background: #4c7983; color: #fff; }

#menu li ul li.red ul { background: #834c4c; }

#menu li ul li.blue ul { background: #4d6899; }

#menu li ul li.gold ul { background: #97944c; }

/ search field /

/ media queries /

/ page structure /