Category: HTML5

Flexbox Responsive Dropdown Menu, No JavaScript

With Flexbox, it’s relatively simple to quickly create a fully responsive menu without JavaScript. This example includes a one level drop down menu as well.

See the Pen Flexbox Menu by Richard (@barkins) on CodePen.

Step 1: HTML

Here’s a the simple HTML code with an unordered list. Although this can be done without using a UL, it’s more effective to use it when you have a dropdown menu. Otherwise, it’s safe to omit it.

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="sub-menu"><a href="#">About</a>
      
      <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Bio</a></li>
      </ul>
    
    </li>    
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav><!--/menu-->

I tried to omit any unnecessary custom classes, however I did need to include one with the drop down LI tag.

Step 2: CSS

Here’s where the Flexbox action comes into play. Start by selecting the UL and add display:flex to it.

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

In order to have the menu take the full space of its container, I needed to include a width:25% on the LIs. Initially I wanted to use flex-grow:1 instead, however I ran into some wonky width issues when hovering over the dropdown menu. Just be sure to change the percentage width based on how many top level menu items you have.

.menu ul li {
  width: 25%;
}

For the dropdown menu, you’ll first want to hide that UL inside the LI tag.

.menu ul li > ul {
  display: none;
  flex-direction: column;
}

Then when hovering over the LI menu item with a dropdown inside of it, apply display:flex to it.

.menu ul li:hover > ul {
  display: flex;
}

Step 3: Complete CSS

Here’s all the CSS for your reference.

.menu {
  font-family: sans-serif;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.menu ul li {
  width: 25%;
}
@media (max-width: 40em) {
  .menu ul li {
    width: 100%;
  }
}
.menu ul li > ul {
  display: none;
  flex-direction: column;
}
.menu ul li > ul li {
  width: 100%;
}
.menu ul li:hover > ul {
  display: flex;
}
.menu a {
  text-transform: uppercase;
  display: block;
  background: blue;
  padding: 15px;
  color: white;
  text-decoration: none;
  text-align: center;
}
.menu a:hover {
  background: lightBlue;
  color: blue;
}
.menu .sub-menu li > a {
  background: lightBlue;
  color: blue;
}
.menu .sub-menu > a:after {
  content: "+";
  padding-left: 5px;
}
Filed under: CSS3, HTML5Tagged with:

Getting Started with Flexbox

Flexbox is looking to be the likely successor to CSS floating containers. It has powerful, intuitive features and finally being adopted by every major browser.

Example of Flexbox in Action

See the Pen Fun with Flexbox by Richard (@barkins) on CodePen.


Here’s a quick three step guide to getting started with Flexbox.

Step 1

Starting with the parent container, include the following styles.

.container {
  background:lightBlue;
  max-width:960px;
}

Then drop in some child elements into the container and include a height.

.content {
  height:50px;
  background:blue;
  margin:25px;
  color:#FFF;
  padding:15px;
}

Here’s what we have so far, without Flexbox styling yet.

noflexbox

Step 2

Now, just add display: flex; inside the container styling and watch happens automatically.

.container {
  background:lightBlue;
  max-width:960px;

  /*FLEXBOX*/
  display:flex;
}

withflexbox

Step 3

Changing the Order

The first cool thing we can do with Flexbox is change the order of the child containers. Just add the following property to the parent container.

/* ORDER */
flex-direction:row-reverse;

flexboxorder

What if we want to specifically target one child container and change its order? It’s as easy targeting and including the following CSS property. This way you can have complete control in which order the child containers appear in.

.content:nth-child(1) {
  order:4;
}

.content:nth-child(4) {
  order:2;
}

.content:nth-child(3) {
  order:3;
}

.content:nth-child(2) {
  order:1;
}

flexboxoneitemorder

Flex Grow

As cool as the boxes look all shifted to the right, lets evenly distribute them across the row. As you resize the container, the boxes will responsively resize.

Include the following CSS property in the child container class.

flex-grow:1

flexboxgrow

Flex Wrap

You might be asking yourself, what happens in a responsive situation? By default, the child containers will automatically resizes themselves on the same row getting very narrow instead of dropping down to the next row. Here’s how we change that.

Add the following CSS property to the parent container in order for the child containers to drop down automatically to the next row as parent container gets smaller.

flex-wrap: wrap;

flexboxwrap

To get an even deeper look into how Flexbox works, check out this complete guide on CSS-Tricks.

Filed under: CSS3, HTML5

HTML5 Forms Reference Guide

Thanks to HTML5, forms are becoming less of a headache to construct than ever before. Browser support has never been better, especially on smartphones and tablets, making this a great time to get back to basics with constructing your own forms.

The beauty of taking advantage of new input types is that if someone’s on an antiquated browser (any version of IE–kidding of course), then the input field will default back to type=”text”.

These new input types are especially useful on mobile devices, by informing the mobile OS to serve up the most appropriate keyboard for the task whenever someone taps on a field asking for a telephone, email or web address.

Here’s a reference of all the fields I’m going to cover.

See the Pen HTML5 Form by Richard (@barkins) on CodePen.

Search

A couple of new attributes in HTML5 input tags are the placeholder and spellcheck attributes. In the past, placeholder text was accomplished with JavaScript, but now its functionality is built right it. It’s basically sample text inside the input field hinting to the user what they should do with the field. As soon as the user starts typing, the copy disappears. Additionally, in this example I set spellcheck to false indicating that the browser should not spell check whatever the user enters. May not be all that useful, but it’s nice to know we have the option.

<input type="search" id="search" placeholder="search something" spellcheck="false">

Email, URL, Telephone

If you have ever constructed a database driven website, you’ll know how frustrating it is whenever someone enters information into the database inconsistently. These new input types help in producing more consistent results from user submitted information.

Not only are you able to easily set the input field to required just by adding the word, required, but as an email type, the field will automatically check to see if the user entered the email account correctly.

<input type="email" id="email" placeholder="enter your email" required>
<input type="url" id="url" placeholder="enter your website address">
<input type="tel" id="tel" placeholder="enter your phone number">

Datalist

Screen Shot 2014-09-29 at 2.44.14 PM

In effort to make forms less cumbersome to the user, you’re able to now add a list of possible values a user may enter, expediting the process of filling out a form. In the following example, I created a list of colors a user may enter. As they type their favorite color, a suggestion of possible options appear.

Here’s how to construct a list of suggestions.

  <datalist id="colors">
    <option>red</option>
    <option>green</option>
    <option>blue</option>
    <option>yellow</option>
    <option>orange</option>
  </datalist>

And here’s the input field referencing the list of options.

<input type="text" id="datalist" list="colors" placeholder="Your favorite color">

Range

The range input is also very useful in cases when you want to store consistent and specific information in the database without running into a risk of a user entering something by mistake.

<input type="range" id="range" max="100" min="0" value="10" step="10">

Date

Screen Shot 2014-09-29 at 2.45.03 PM

This is a cool feature built into modern browsers. Yet another example of something that use to be time consuming constructing with JavaScript, a calendar picker, no scripting at all.

<input type="date" id="date">

Color

Screen Shot 2014-09-29 at 2.45.46 PM

The color picker, just like the calendar picker is also very useful, but alas from my experience doesn’t have the same support on smartphones that it does on the desktop.

Wrapping it Up

And just like that, with no JavaScript you’re able to create a fast, user friendly forms. Just keep in mind however, this isn’t supported on older browsers, therefore if you think you’re going to receive a lot of visitors on older browsers, be careful with input fields that require precise information to be entered. You may need to resort to JavaScript solutions as a precaution.

Filed under: HTML5

Sticky Header with jQuery slideDown()

If your webpage gets long, you may have the desire to keep some form of branding on your website for readers to always see as they scroll through your content. This approach achieves that in a subtle yet effective way without being overly pushy.

Here it is in action.

See the Pen Sticky Header by Richard (@barkins) on CodePen.

You can apply these principles to other elements on your webpage, but I recommend using this technique judiciously and not over do it. Sticky elements on a page can oftentimes have unintended side effects, which I’ll cover briefly at the end.

HTML

Nothing out of the ordinary in the HTML, just straightforward HTML5 tags for the header and article areas.

<header id="header">
  <h1>Sticky Header</h1>
</header>

<article>
  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus dui nisi, a tincidunt nisi consequat id. Donec auctor tortor rhoncus hendrerit.......</p>

<p>....</p>
<p>....</p>
<p>....</p>
  
</article>

CSS

For styling, the only element you’ll really need is a sticky class with the following properties.

.sticky {
  position:fixed;
  display:none;
}

Additionally, the header should be styled so that its width is 100%, or you will need to add that width size to the sticky class. I’ll leave it up to you to see what happens if you don’t set a width to 100%.

Here’s all the CSS put together.

* {
  box-sizing:border-box;
  font-family:sans-serif;
}

body {
  margin:0;
  background:#c6c6c6;
}

#header {
  background:rgba(47,85,131,.9);
  padding:25px;
  text-align:center;
  color:#FFF;
  width:100%;
}

.sticky {
  position:fixed;
  display:none;
}

article {
  padding:25px;
}

jQuery

We start with creating a function that will store some position values, along with the element we want to be sticky.

var stickyHeader = function(){
  //THE POSITION OF TOP OF PAGE IN BROWSER WINDOW
  var windowTopPosition = $(window).scrollTop();
  
  //THE POSITION OF ARTICLE TOP
  var triggerContainer = $('article').offset().top;

  //THE THING THATS STICKS
  var stickyContainer = $('#header');
}

Next up, we’ll need to test if the position of windowTopPosition is greater than triggerContainer and if it is, go ahead and add the sticky class to the container we want to be sticky.

  if (windowTopPosition > triggerContainer) {    
    stickyContainer.addClass('sticky');
    stickyContainer.slideDown('fast');
    
  }else{
    stickyContainer.removeClass('sticky');
    stickyContainer.css("display","");
  }

If you noticed in the CSS previously, I included display:none in the sticky class styling, it’s because I also wanted it to slide down when the container became sticky. Otherwise the transition from non-sticky to sticky header can be a bit jarring.

This occurs when the if/else statement is true, I also included a stickyContainer.slideDown('fast'); which in effect brings the container out of hiding with a nice animation.

One key thing here is, if the user goes back to the top, although the sticky class will be removed, the display:block portion left behind by slideDown() will remain, destroying the slideDown() effect.

This is why I included the following jQuery function to fix it.

stickyContainer.css("display","");

Of course none of this function will work unless we trigger it somehow and we do that whenever the user scrolls on the page, like so.

$(window).scroll(stickyHeader);

Here’s the whole jQuery code put together.

var stickyHeader = function(){
 
  //THE POSITION OF TOP OF PAGE IN BROWSER WINDOW
  var windowTopPosition = $(window).scrollTop();
  
  //THE POSITION OF ARTICLE TOP
  var triggerContainer = $('article').offset().top;

  //THE THING THATS STICKS
  var stickyContainer = $('#header');
  
  if (windowTopPosition > triggerContainer) {    
    stickyContainer.addClass('sticky');
    stickyContainer.slideDown('fast');
    
  }else{
    stickyContainer.removeClass('sticky');
    stickyContainer.css("display","");
  }
  
  
};

$(window).scroll(stickyHeader);

You may now think you can apply this technique to other elements on your page, but be warned, whenever you apply a fixed styling to an element, the element gets moved out of its container and may end up covering up portions of content on your site. You have been warned.

Filed under: CSS3, HTML5, jQuery