• Home
  • Android
    • Apps
      • Android OS Build App
      • Compare Phone Contracts
        • Example 1
        • Example 2
        • Example 3
        • Example 4
        • Example 5
        • Example 6
      • Lump Sum Savings
  • Articles
  • Free Resources
    • Android Graphics Resources For Use In Apps
  • Index

Tekeye's Technology Blog

Responsive Menu Tutorial for HTML Web Pages, No JQuery

Articles - diana - June 29, 2015

HTML Menu Bar Which Switches to Dropdown for Mobile

For a web site to be successful it must tick several boxes. It needs an attractive design, great content, no pop-ups, not throw to many advertisements at visitors and work well on a variety of screen sizes. The last point is important as mobile devices are now the dominant platform for accessing the web. Achieving multi-screen support from a single web site saves time (no need to update the design more than once). Time is a precious resource for most people and businesses.

A web site needs to respond to the device it is being viewed on, hence the term responsive design. When a website uses a menu to allow the viewer to jump to other pages, that menu should work well on different screen sizes. This article is a responsive menu tutorial giving an example implementation of the Responsive Nav plugin. This provides a basic responsive web site menu without using any other frameworks or libraries. As the screen shrinks the menu switches from traditional horizontal to a button. The button is used to dropdown the menu on smaller screens.

A basic menu is achieved using the HTML tag for an unordered list, the <ul> tag. Each list item tag, <li>, in the unordered list wraps an anchor tag, <a>, to provide the link to the other resource or location. Here is an example of an unordered list with links to other items (in this case on the same web page):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang=“en”>
    <head>
        <title>A Web Site</title>
    </head>
    <body>
        <ul>
            <li><a href=“#home”>Home</a></li>
            <li><a href=“#about”>About</a></li>
            <li><a href=“#projects”>Projects</a></li>
            <li><a href=“#blog”>Blog</a></li>
        </ul>
        <h1 id=“home”>Home</h1>
        <p>Home text.</p>
        <h1 id=“about”>About</h1>
        <p>About text.</p>
        <h1 id=“projects”>Projects</h1>
        <p>Projects text.</p>
        <h1 id=“blog”>Blog</h1>
        <p>Blog text.</p>
    </body>
</html>

For a menu this wastes space. On a desktop or wide screen (e.g. a tablet or phone held in landscape) there is redundant space, and the menu pushes content unnecessarily below the fold (the bottom of the browser or screen):

 

With the help of Cascading Style Sheets (CSS) the list item tags can transformed into a horizontal menu for more space efficiency, there are several ways to achieve this. The simplest is to set the <li> tag to display inline, some padding is added for a little spacing (add the style to the <head> section in the above example):

1
2
3
4
5
6
...
<head>
    <title>A Web Site</title>
    <style>li {display:inline; padding-right: 1em;}</style>
</head>
...

 

A similar effect is achieved by floating the <ul> and <li> elements:

1
2
3
4
<style>
    ul {list-style: none; float: left; width: 100%;}
    li {float: left; width: 75px;}
</style>

On small screens and when the browser window is dragged small this horizontal menu will wrap, pushing the contents down. Using some JavaScript and a little more styling the menu can be closed to a single link. Clicking the link opens and closes the menu options. This is what the Responsive Nav plugin does.

To implement Responsive Nav download the Responsive Nav zip file, extract responsive-nav.css and responsive-nav.js and link them to the web file. Wrap the <ul> menu in a <nav> tag and give it a class name, here class=”nav-menu” is used. The Responsive Nav styling floats the menu elements. Finally at the end of  the page call the responsiveNav function passing in the given class name:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang=“en”>
    <head>
        <title>A Web Site</title>
        <link rel=“stylesheet” href=“responsive-nav.css”>
        <script src=“responsive-nav.js”></script>
        <style>
            .nav-menu ul { float: left; }
            .nav-menu li { float: left; }
            @media (min-width: 40em) {
                .nav-menu li { width: 70px; text-align: center; }
            }
        </style>
    </head>
    <body>
        <nav class=“nav-menu”>
            <ul>
                <li><a href=“#home”>Home</a></li>
                <li><a href=“#content”>Content</a></li>
                <li><a href=“#about”>About</a></li>
                <li><a href=“#blog”>Blog</a></li>
            </ul>
        </nav>
        <h1 id=“home”>Home</h1>
        <p>Home text.</p>
        <h1 id=“content”>Content</h1>
        <p>Content text.</p>
        <h1 id=“about”>About</h1>
        <p>About text.</p>
        <h1 id=“blog”>Blog</h1>
        <p>Blog text.</p>
        <!– Responsive Menu –>
        <script>responsiveNav(“.nav-menu”);</script>
    </body>
</html>

 

Responsive Nav supports several options, view the documentation and play with the examples to see what can be done. For example pass a string to the label setting to change the text for the default menu link:

1
<script>responsiveNav(“.nav-menu”, {label:“My Menu”} );</script>

Menu (Hamburger or Air Vent) IconIt is common for a menu to be indicated with a hamburger (menu) icon. Responsive Nav can replace the default text link to drop the menu with a custom element, like a button or img. See the demo code in the zip file.

A quick way of getting the hamburger icon is to use a similar unicode character and set that as the menu text. Unicode 2630 is appropriate, although it may not work on older devices:

1
<script>responsiveNav(“.nav-menu”, {label:“\u2630”} );</script>

Plus a little CSS:

1
2
3
…
.nav-toggle { text-decoration: none; font-size: 26px; }
</style>

 

This tutorial did not do any fancy formatting with the menu, use CSS to do more styling. Some other interesting menu resources:

  • TinyNav.js – an alternative responsive menu.
  • Adventures in Responsive Navigation – other way to do responsive menus.
  • Listamatic – other ways to format menus.

Related posts:

  1. Show PHP Settings with phpinfo and Example PHP $_SERVER Display Page
  2. Develop a Website on Windows Using Microsoft WebMatrix
  3. Encrypt Decrypt of a String in C# .NET
  4. PHP on Windows Using WebMatrix Single Click Install
 0 0

Share This Post!

About Author / diana

No Comment

Leave a Reply Cancel Reply

Your email address will not be published. Required fields are marked *

Previous Post
Next Post

About Me

Thanks for visits my website, hope you like my posts

Recent Posts

  • Blogging Guide – Start a Blog in 3 Easy Steps
  • This Changes Everything
  • How to make a website
  • How to Make a Weebly Website
  • Why Some Webcomics (and Some Web Businesses) Are Successful
  • Hostmonster Coupon Code and Discount Offer 2021
  • Frugal Tips for a Freelance Web Designer
  • Affiliate Millions: Make a Fortune using Search Marketing on Google and Beyond
  • Surefire SEO For New Websites
  • SEO – Using Bait to Attract Website Visitors
  • WEBSITE DESIGN TIPS
  • Xbox 360 Flashing
  • 12 best tools productivity business
  • Top android security apps available on market
  • How to View Instagram Private Accounts [2021 Guides]

Archives

  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • January 2016
  • June 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015

Widget Area 1

Assign a Widget

Widget Area 2

Assign a Widget

Widget Area 3

Assign a Widget

Alison is a creative soft blog theme made with by angrygorilla.