size of the HTML Menu

Posted on 2014-11-25
Last Modified: 2014-12-10
Are there any example to build up a menu such that it can realign the menu on a smaller screen ? Does the code allow to detect the screen size and recreate any menu as attached ?

Question by:AXISHK
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
LVL 58

Expert Comment

ID: 40464618
There are multiple ways of doing this, a few examples here

Really depends on your markup.

Author Comment

ID: 40465919
Do I need to include a code to detect the screen size, in order to display screen1 (large screen) or screen 2 (smaller screen) ? How to achieve this ?

LVL 58

Accepted Solution

Gary earned 500 total points
ID: 40465921
The link above gives you the css and media queries for each example

The keyword here is media queries e.g.
@media screen and (max-width: 768px) {
  .tinynav { display: block }
  .dropdown { display: none }

Open in new window

This tells the browser what to do at various screen sizes
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 40465958
Tks.  As seen in my attached screen, the application will put all the menu item into a "square box". So does it mean there are two some special coding on handling the items ?  

Is it possible to have a sample demonstrate so that I can visualize how to make this menu in two different resolution, similar to my attached screens ?

Great thanks again.
LVL 58

Expert Comment

ID: 40465962
If you are using Magento I would look at Magento Connect for some freebie plugins, though I thought Magento had a responsive menu built in now...?

Author Comment

ID: 40465979
I have downloaded Magento but I will not use it as I can't find a way to start after reading a user guide menu.  

I only need to build two set of menu on different resolution, similar to that I have attached. Tks
LVL 58

Expert Comment

ID: 40465982
The link provides all the css and media queries for the different menu's
Unless you have real code and not a screenshot there is no point providing code as every implementation is different

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question