Responsive horizontal CSS menu in website design

Responsive horizontal CSS menu in website design

Most of us know, today website is a common terminology for online activities. Whether it maybe a personal website or an eCommerce, easiest way of any business works using a website. There are lot of ways of building a website with less ease and effort as number of tools are evolved for building a website for novice users.

But trends have changed that website turned useful all ways of life, as life changed fast, UI also changed accordingly. Business people might not have an extra time to poke around a PC or laptop from remote place, as people are more prone to smartphone usage.

According to latest Internet Usage Surveys, it is mentioned that around 45% of total global population is using internet through their gadgets rather than traditional method like Desktops. So terminology of RWD (Responsive website design) is latest jargon in world of World Wide Web (WWW).

So to catch up in the fast pace, we must have some insights of how these RWD plays a role in Website development.

In this tutorial, let us share some thought of how a simple css menu using list (li tags) in html responds friendlier to mobile only using CSS. (Responsive menu)

Following is complete HTML code for header:

Assuming, header part contains our “Logo” and “Horizontal Menu”.

So in above code, we have a main

tag with class named “Container”, enclosed with a

tag for logo and HTML5

tag which contains Horizontal menu.

Below CSS will help to appear perfect in all modern browser.

Above CSS is to be added normally inside head part of html.

Demo on above code

Placing them in body section also works, but it is actually recommended method of embedding a style sheet in HTML page according to W3c recommendations.

Other recommended method is to create an external style sheet and link in head section using a link tag like below.

————————————————————————————————————

Let us drill down each css blocks given below and see what it does.

When we add any html tags to use in a webpage, it has a built in style which display in browsers. So when we add our own styles to each blocks or paragraphs, those inbuilt styles will confuse us from where those extra style/properties came in. So in order to avoid such issues, we usually use reset/normalize code to nullify those using reset code.

‘*’ means it is global to all elements in that particular page (if it is embedded style) or to a complete project (if it is external style linked sheet, assuming all pages will have link tag in their head portion of the code).

The above code resets;

1. Margin (extra space found outside an element or block)
2. Padding (extra space found inside an element or around its whole content)
3. Normally links (anchors) have an underline style which we can reset using text-decoration property to ‘none’
4. In some browsers when an event, click occurs over an anchor tag, it develops an outline dots in webkit enabled browsers as well as IE browsers. So remove that outline effect, we reset using outline:none value.
5. For ‘list’ elements (li), we need to avoid bullets of any kind in some UI designs. We need to use list-style:none to avoid it.

Above are not a limited set of reset condition(s), but it depends upon designer and browser type which they are targeted which it may increase the number of reset conditions to be placed inside global property ‘*’.

Next is container for header part and containers for logo and menu separately.

Above css starts with a “container” class which is main Container for header. It is actually,
1. Centered using margin:0px auto
2. Limited to a maximum width of 1000 pixels.
3. Minimum width refers to portrait mode, when it is viewed through a gadget or when a browser is resized to minimum extend. So we can see menu properly in 320 pixel width, and below that it hides and a horizontal menu will appear, if it is not explicitly hidden using any means (More about max and min width is explained below in media query section).
4. A extra space of 20 pixels is provided on left and right side of the whole container.

Inside main container is “Logo” and “Horizontal Menu”, which refers to ‘logo’ class and HTML5 ‘nav’ element which is container to each and display property is defined to be in a line with a block property. So elements will be inline as well as block property will be applied to it.

Since it is inline, the two container will stay side by side which is against the Design. So since nav should stay at right side of screen, it is defined as float:right in next part of the css block. So it will stay in right possible extreme of the window.

The following part of css, is only view-able in a smaller screen which clearly stated before as mobile view. ( A smartphone or a similar gadget of that kind ). The following first css block is defined to be hidden, since it is not required to show in desktop view. So we will explain about it in following part.

Demo on above code

Now for responsive website, we need to include media query which enables style to respond for different device widths. Normally media query responds in browsers when we resize browsers horizontally. If we have separate media query for desktops, tablets and mobile, browser resize will enable to call that particular styles written in that particular section of media query in code. Other ways of re-sizing and test is using “viewport render tool” built in modern browser which has a “mobile icon” when we click over “inspect element” in webpage of browser.

Using media query in CSS is not a unique method for Responsive webdesign, but it is easiest of all other methods when we create a website from scratch. There are a lot of other methods using media query itself, by passing maximum width of page and calling separate css for that page using tag in head section of HTML. Or other methods are bootstrap, css grid etc.. as RWD methods are growing day by day.

But in this tutorial we will stay with media query in single css code or sheet, with separate device widths which is considered to be easy to edit and use by a single editor or multiple editors.

Eg. For mobile we can define media query as follows;

Most of us know normal smart phone has limited width and height is large compared to width (it varies to different phones nowadays). So normal width is referred to “Portrait” and height is referred as “Landscape” in css. So when we view a website or web app in a normal smartphone, we say it is viewed in “Portrait” mode which is 320 pixels in normal smartphone. That means we can refer it as “Minimum device width” for smart phones. And when same view is rotated (Means Landscape), site should adjust accordingly and we say it is viewed in “Landscape” mode which is 480 pixels in normal smartphone. That refers as “Maximum device width” for that smartphone which we view.

So we got the point, on how Minimum (min-width:) and Maximum (max-width:) width plays the role in any media query of css code for a particular gadget. So min and max width varies according to gadgets sizes and density (Smartphone, Tablets, iPhone’s, iPad etc..).

From above css, @media (max-width:479px) refers to website viewed in landscape mode and there is no special restriction of width in portrait mode.

If we give, @media (min-width:320px) and (max-width:479px), below device width of 320 pixel inside smartphone that particular page could not be viewed properly. Either you need to touch and move page right or left to see missed content, since smartphones or gadgets have no capability of scrolling like we usually do in a desktop or laptop.

So let us explain the remaining piece of code we kept above in media query section.

Demo on above code

So as explained before, our code is not limited to min-width. So it will be properly viewed in mobiles with less than 320 pixels width. One main thing to enable media query in gadget is adding a tag to section of HTML code. Otherwise webpage or site will be available only as we normally see in desktop or PC, which will be unreadable and requires zoom/scale up to make it readable which is not a responsive design.

Below meta tag need to be added in head portion of html.

View-port refers to Device width which we are viewing that page, not a browser width which we view a website. The above code;
1. Does not handles a page viewed in a desktop or laptops and it is explicitly mentioned to work for a handheld device or gadget.
2. Initial scale of value “1” refers to normal view or 100% of size for any content or images in webpage. It means the user does not to scale down or scale up (zoom out or pinch), to view the content properly in his hand held device.
3. Maximum scale refers to restriction in zoom/scale up that page in hand held device while user is viewing.

So viewport meta-tag is an important requirement to enable the page to respond for any gadget other than Desktops.

When we view the current tutorial page in a mobile or screen less than 480 pixels, menu which we see normally in desktop should disappear and a icon to click over that should display instead. For that, we included “Check-box” input element to simulate toggle (on and off) between icons for drop down menu in smartphone.

Below code illustrates, how it is used. It is code which appears in media query section said above;

We see from code that a “Check-box” input element named “triggerMenu” is placed on top of stacked (position absolute with z-index property) HTML elements (span).

One span is provided with 3 lined ASCII char ‘≡’ and other span which is stacked below with another ASCII of “×”. To enable ASCII characters over web and gadgets, we need to include a tag to support utf-8 character set () in a webpage.

So our current page will have following code in section.

On normal views (Desktops), drop down menu and 3 lined icon will be hidden, and in gadget view “Check-box” and “span” will be enabled and drop down menu will be hidden on page load. When we click over “check-box” which normally transparent(given css opacity:0), the icons will swap (line icon will change with cross), actually one layer is getting hidden and other appears below it. On same instance, the drop down will also be displayed. The code which does the particular thing is given below;

So Checked event is triggered in css by using :checked selector for check-box input element. And ~ (tilde) refers to any element(s) coming after next adjacent element to triggered element checkbox. Means, it maybe span with id=”close” or Menu (ul) tag. So both are enabled (display:block), as we can see in above code.

At the same time, “+” pseudo element, which means next adjacent element to check-box hides (display:none).

Complete Demo

So all together, we enabled a normal list menu to respond better in a smartphone or any mobile. We can make changes or incorporate same procedures or ideas to create your own UI design.

Hope you understood the steps mentioned above. Thanks for watching, if you have any suggestion or found any error in typo/or above mentioned, please drop in a mail from contact section of our website.

You can download zip, with all aforesaid content.

Conclusion

If you’re interested about a career within the fields of Website Design or Website Development, you can confirm which line of course would be most fitted for you from Amrita Multimedia Academy.


For more information on cou Website Design or Website Development in Amrita Multimedia Academy, we advise you to have a face to face conversation with us or drop a mail via our contact form. Alternately, call us: +91 0476 2804422. We are open from Mon-Sat except Public Holidays, from 9.00 AM to 5.30 PM IST.