Simple trick to create a one line horizontal responsive menu with CSS only – Podcastpedia.org

In this post I will present a trick I used to create the responsive menu on Podcastpedia.org :

Responsive menu on Podcastpedia.org

Responsive menu on Podcastpedia.org

Octocat Source code for this post is available on Github - podcastpedia.org is an open source project.

There are lots of resources out there on how to design horizontal menus with sub-menus, so I won’t insist on that. My favorite so far is How To Create a Pure CSS Dropdown Menu[1] by @chrisspooner

1. The trick

1.1. Initial design of the menu

Initially the items in the menu used to disappear if the size of screen got smaller, because of CSS overflow property that was set to hidden for the elements in list of the menu. I considered that a satisfying “responsive” solution for the beginning, but later it crossed my mind not to deprive the visitors with small screen resolutions from all the wonderful links you can access directly on Podcastpedia.org via the main menu…

1.2. Requirements

So a better solution was need and it had to satisfy the following requirements:

  • all the links from the menu should be easily accesible even on small screens
  • showing and hidding of menu elements should happen gradually based on the screen width and not the Bootstrap classic approach, where once a certain width is reached everything is reduced to a Menu button
  • and of course it should look nice
  • 1.3. Result

    You can see what came out in the initial picture or by visiting the Podcastpedia.org website. If by the time of your reading I will have already changed the design of the menu, you can have a look at this recorded video :

    1.4. The magic

    1.4.1. HTML/JSP Code

    Well, the trick I used was to have the links from the menu inserted twice in the html code but with differend ids for the list elements containing them:

    <div id="nav">
    	<ul>
    		<li id="nav-homepage">
    			<a href="/">Home</a>
    		</li>
    		<li id="nav-tags">
    			<a href="/tags/all/0">Keywords</a>
    		</li>
    		<li id="nav-categories">
    			<a href="/categories">Categories</a>
    		</li>
    		<li id="nav-add-podcast">
    			<a href="/how_can_i_help/add_podcast">Add Podcast</a>
    		</li>
    		<li id="nav-support">
    
    			<a href="/how_can_i_help">Support</a>
    		</li>
    		<li id="nav-contact">
    			<a href="/contact">Contact</a>
    		</li>
    		<li id="nav-podcasting">
    			<a href="/podcasting">Podcasting</a>
    		</li>
    		<li id="nav-responsive">
    			<a href="#"></a>
    			<ul>
    				<li id="nav-tags-resp">
    					<a href="/tags/all/0">Keywords</a>
    				</li>
    				<li id="nav-categories-resp">
    					<a href="/categories">Categories</a>
    				</li>
    				<li id="nav-add-podcast-resp">
    					<a href="/how_can_i_help/add_podcast">Add Podcast</a>
    				</li>
    				<li id="nav-support-resp">
    
    					<a href="/how_can_i_help">Support</a>
    				</li>
    				<li id="nav-contact-resp">
    					<a href="/contact">Contact</a>
    				</li>
    				<li id="nav-podcasting-resp">
    					<a href="/podcasting">Podcasting</a>
    				</li>
    			</ul>
    		</li>
    	</ul>
    </div>

    1.4.2. SCSS/CSS code

    Now that the menu item are present twice, I can show and hide them based on the width of the display with media queries:

    /** media queries to hide and show menu items, based on the display width */
    @media screen and (min-width: 1040px) {
      #nav-responsive {
        display: none;
      }
    }
    
    @media screen and (max-width: 1039px) {
      #nav-podcasting-resp, #nav-contact-resp {
        display: block;
      }
      #nav-podcasting, #nav-contact {
        display: none;
      }
    }
    
    @media screen and (max-width: 900px) {
      #nav-support-resp {
        display: block;
      }
      #nav-support {
        display: none;
      }
    }
    
    @media screen and (max-width: 750px) {
      #nav-add-podcast-resp {
        display: block;
      }
      #nav-add-podcast {
        display: none;
      }
    }
    
    @media screen and (max-width: 610px) {
      #nav-categories-resp {
        display: block;
      }
      #nav-categories {
        display: none;
      }
    }
    
    @media screen and (max-width: 465px) {
      #nav-tags-resp {
        display: block;
      }
      #nav-tags {
        display: none;
      }
    }

    As you can see in the code for big screens (width over 1040px) the elements marked with resp(onsive) are not shown at all, but once the width gets smaller, elements from the menu are hidden and corresponding elements from the second resp(onsive) menu list. These are now shown when you hover (tip on mobile) over the standard menu icon standard menu icon

    Octocat Source code for this post is available on Github - podcastpedia.org is an open source project.

    2. Resources

    2.1. Web

    1. How To Create a Pure CSS Dropdown Menu
    2. CSS display Property
    Podcastpedia image

    Adrian Matei

    Creator of Podcastpedia.org and Codingpedia.org, computer science engineer, husband, father, curious and passionate about science, computers, software, education, economics, social equity, philosophy - but these are just outside labels and not that important, deep inside we are all just consciousness, right?

    Free Programming Books are now on Codingmarks.org

    We're happy to announce that we've reached and surpassed our goal of 1 Mb #codingmarks, by importing the books from the Free-Programming-Books project Continue reading