Solved

size of the HTML Menu

Posted on 2014-11-25
7
79 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
ID: 40464618
There are multiple ways of doing this, a few examples here
http://responsivenavigation.net/

Really depends on your markup.
0
 

Author Comment

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

Tks
0
 
LVL 58

Accepted Solution

by:
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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

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

Expert Comment

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

Author Comment

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

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 45
Remove greater than sign 3 49
Angular JS Route 3 54
Javascript to allow login/password authorization 4 31
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 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

28 Experts available now in Live!

Get 1:1 Help Now