Solved

flyout menu responsive

Posted on 2013-05-30
8
524 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
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…
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…

785 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