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

x
?
Solved

Bootstrap templates with vertical and horizontal navigation

Posted on 2015-01-22
14
Medium Priority
?
608 Views
Last Modified: 2015-01-26
I don't know if this is a physical possibility. But I know my boss would like a responsive site with a top navigation with drop-downs, and a left side menu with flyouts.

I have no idea how that might work on a phone, but I thought if anyone could tell me
a. Is it a possibility?
b. Is there a template out there with this feature that I could buy?

Thanks.
0
Comment
Question by:mel200
[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
  • 8
  • 6
14 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40565429
so to clarify, the boss wants a top nav with dropdowns in desktop view and the same nav as a leftside flyout in mobile view?

or, he wants both navigations in both views?
0
 

Author Comment

by:mel200
ID: 40565443
He wants both navigations in both views. Like www.magickitchen.com. Which is so far from a responsive site it's nuts.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40565456
well... anything is possible. but this will not be a good user experience on a small screen.

you'll only be able to fit 3 or 4 menu items at the top anyway. so what's going to happen to the rest of the menu items?

you need to persuade your boss that he/she needs to rethink the nav for mobile and do it properly.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:mel200
ID: 40565464
For a website with about 82 navigation links, what would you suggest as the best nav to go with? I think side would be most useful. Thanks for your help.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40565482
you can still have multiple navs. For example, a hamburger icon in the top left that slides a nav out of the left, and another one on the right that slides a nav in from the right.

Each of those can have submenus the slide in from the sides.

Are all 82 links top level links?

Here is a different example (this is kind of old looking now, so don't worry about the design) of a sliding menu with submenus, and some additional buttons which could also hold menus. resize your browser to less than 600px wide.

http://candpgeneration.com/toys/mobile-menu/mobile-menu-full.html
0
 

Author Comment

by:mel200
ID: 40565498
No, there are several flyouts. That's kind of cool. I would love to see other examples.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40565523
If you use bootstrap, here's a plugin that slides the whole page:

http://jasny.github.io/bootstrap/javascript/#offcanvas
0
 

Author Comment

by:mel200
ID: 40565563
I do use Bootstrap! Thanks, I'll have a thorough look at that tomorrow.
0
 

Author Comment

by:mel200
ID: 40570387
Here's what I got from the boss today:

I still want the main toolbar at the top with additional links on the side.

If we can’t do it then I am not really interested in it.(Having a responsive website).


Sigh. I wonder if Foundation would be able to do this?
0
 

Author Comment

by:mel200
ID: 40570399
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40570417
have you looked at those sites on a phone? they all have a hamburger icon on the left which slides out a menu. none have a menu across the top. i have not looked at them on a desktop uet. but it sounds like they have separate mibile sites. the reason you make something responsive is so that it is user friendly at smaller sizes - these companies have solved that problem by creating separate sites for mobile.

one other type of menu you could try is one that slides across. this would allow for any number of items across the top.

if your boss is that adamant about their idea then throw together a prototype so they can see for themselves how awful it is. or just forget responsive
0
 

Author Comment

by:mel200
ID: 40570428
Ok, thanks. We have a separate mobile site, but it's a link on our website. I've heard there's a way to force people to the mobile site when the screen is smaller, but I had heard that's not a good thing to do.

Also, don't they then have to enter all their products separately? I guess not, if the mobile site uses the same data.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 40570446
I'm not saying you should have a separate mobile site.

I said what I said to indicate that the sites you posted do NOT have the menu structure your boss is looking for in mobile.

If they want the traditional menu structure then they need to forget about responsive, or being user friendly in mobile. Did you ask your boss for an example of they are looking for? and why? when they provide said example, you need to bring it up in a mobile device and test whether it's any use.
0
 

Author Closing Comment

by:mel200
ID: 40570512
Thanks for your help and advice!
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

722 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