Solved

flyout menu responsive

Posted on 2013-05-30
8
527 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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