Solved

size of the HTML Menu

Posted on 2014-11-25
7
74 Views
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 ?

Tks
Screen1.png
screen2.png
0
Comment
Question by:AXISHK
  • 4
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
There are multiple ways of doing this, a few examples here
http://responsivenavigation.net/

Really depends on your markup.
0
 

Author Comment

by:AXISHK
Comment Utility
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 ?

Tks
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
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
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:AXISHK
Comment Utility
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.
screen-3.png
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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...?
0
 

Author Comment

by:AXISHK
Comment Utility
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
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now