size of the HTML Menu

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 ?

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Really depends on your markup.
AXISHKAuthor Commented:
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 ?

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

AXISHKAuthor Commented:
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.
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...?
AXISHKAuthor Commented:
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
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.