Solved

flyout menu responsive

Posted on 2013-05-30
8
517 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 9

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
 
LVL 9

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39209976
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

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 9

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

757 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

18 Experts available now in Live!

Get 1:1 Help Now