Solved

Bootstrap templates with vertical and horizontal navigation

Posted on 2015-01-22
14
411 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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 500 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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

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.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

708 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

15 Experts available now in Live!

Get 1:1 Help Now