Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

flyout menu responsive

Posted on 2013-05-30
8
Medium Priority
?
543 Views
Last Modified: 2013-05-31
Hi,

I have 1 more issue with responsive menus and that i flyout menus.
I could have a vertical or horizonatal flyout menu (say 2 levels) and what mwthod do I use when I resize it for mobiles?

Do I display everything or have an accordion type display? I want a button click to show the menu .

here is an example of vertical flyout menu (element 5 expands)
<script src="jquery-1.9.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });

$("#nav-status").click(function(e) {
    e.preventDefault();
    $('#navigation').toggle();
});
});
</script>
<style type="text/css">

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
   #menuv{
	  width:300px; 
	   
   }
   
    #nav-status {
        display: none;    
    }

    ul {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
       
        position: relative;    
    }

    ul li:last-child {
        border-right: none;
    }

    ul li ul {
        display: none;
        width: 100px;
        color:#fff;
        background:#666;
        position: absolute; 
        top: 0px; 
        left: 50px;
        overflow: hidden;
    }

    ul li:hover ul {
        display: block;    
    }
}

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
    #nav-status {
        display: block;
        width: 100%;
        height: 21px;
        padding: 2px;
        background: #000;
        color: #FFF;   
    }

    ul {
        display: none;
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-bottom: 1px solid #333;
        width: 100%;
        min-height: 21px;
        padding:2px;
        display: block;        
        position: relative;    
    }

    ul li:last-child {
        border-bottom: none;
    }

    ul li ul {
        display: block;
        width: 100%;
        color:#fff;
        background:#eee;        
        overflow: hidden;
        position: relative;
    }        
}

</style>
</head>

<body>

<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<a href="#" id="nav-status">Open / Close</a>
<div id="menuv">
<ul id="navigation">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
        <a href="#">Item 5</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>
</div>




</body>

Open in new window

0
Comment
Question by:jagguy
[X]
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
8 Comments
 
LVL 18

Expert Comment

by:Rartemass
ID: 39209734
If you set the sizes in percentages of ems instead of pixels then you shouldn't need to change much for different resolutions.
If you have an element at 25 pixels, it will always be 25 pixels on every screen. So if you have a 100 pixel wide screen it will take up 25% of the real estate. If you have a 1000 pixel wide screen it will take up 2.5% of the real estate. That becomes quite a problem.
If instead you use percentages, the element should always take up that percentage of the parent element's space.
This is the same as ems. 1 em takes up the amount of space the letter m takes up on screen when rendered with the system font. This means no matter the size of the screen, the system font will be displayed in a manner that is optimal for that screen.

There are online converters to give a very close approximation to convert pixels to ems. I say that because there is no direct conversion method and you may have some differences. In my experience I haven't needed to be pixel perfect in my designs so this is OK.

As for your specific question about display for mobiles, it depends on what you want to achieve in the mobile space. Do you want it to display the same content or be a slightly different experience?
Take experts exchange for example. The mobile site layout is quite different from the main site and optimised for mobile screens. Essentially it is a re-design of the site experience.
Do your mobile visitors require everything from the full site or can parts be left out?
Once you have these answers you can determine what methods to use.
If mobile visitors must have the same content, then design the site to be viewed at as many different resolutions as possible and use percentages and ems as discussed above. Even if they don't need the same content and layout, I'd recommend this approach to account for tablets and the wide array of screen resolutions out there just on PCs.

Then if mobile customers need a different experience you can design the menus appropriately. You may not need as many flyout menus on mobile so it would save any coding with them.

Please add the answers to the above so we can address your specific requirements better.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39209930
You should have a accordion type display...

It looks more good...

check this...

http://jsfiddle.net/IshaanRawat/KfH4P/
0
 

Author Comment

by:jagguy
ID: 39209962
Hi,
What I want is all the menu options available.  In Mobile view I want the menu to collapse to either a click button where all menu list items are available somehow or the menu collapses to an accordion. I will look at both but I am nit sure what options i can have.

I like this as well and I need to have some way of telling the user to click a menu link if another level is available

http://jsfiddle.net/IshaanRawat/KfH4P/
0
Industry Leaders: 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!

 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 2000 total points
ID: 39209976
0
 

Author Comment

by:jagguy
ID: 39210009
Yep that is good and i will use this.
What other options are available for this type of menu?

Can I just display all the list items in 1 big list like in a textbox to select from when you click a button?
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39210018
There are many options...

Check this links..

http://css-tricks.com/responsive-menu-concepts/
0
 

Author Comment

by:jagguy
ID: 39210052
yes I have seen this but it doesnt use flyout menus which is what i wanted.
0
 

Author Comment

by:jagguy
ID: 39210098
I might leave this question as it has been answered and I just want more solutions. let me work with what has been presented
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

715 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