Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 555
  • Last Modified:

flyout menu responsive

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
jagguy
Asked:
jagguy
  • 4
  • 3
1 Solution
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
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
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
You should have a accordion type display...

It looks more good...

check this...

http://jsfiddle.net/IshaanRawat/KfH4P/
0
 
jagguyAuthor Commented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
0
 
jagguyAuthor Commented:
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
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
There are many options...

Check this links..

http://css-tricks.com/responsive-menu-concepts/
0
 
jagguyAuthor Commented:
yes I have seen this but it doesnt use flyout menus which is what i wanted.
0
 
jagguyAuthor Commented:
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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now