How can I create munu like in this site using bootstrap 4.
As you can see menu in on sidebar with categories. On mobile mode it collapsed.
I agree your question is a bit abstract but here are the main concepts you need to grasp.
With Bootstrap 4 you can create a menu from a Button Group or a Vertical Navigation.
After properly styling either of those you can have the menu suiting the design.
Regarding the collapsed version for mobile all you need is that the "hamburger button" on top toggles the sliding of the menu (using javascript, for example) and that on mobile devices the menu starts hidden using either CSS viewport rules or a javascript plugin. In fact this plugin does exactly what you need. (not affiliated)
Related
I've looked all over, but I can't find the exact solution to what I want to do. I'm new to coding so it's likely a simple solution that I'm just not seeing.
I want to create a sidebar nav that is fixed on desktop and tablets, but collapses into a hamburger menu that is fixed to the top on mobile using Bootstrap 4. A lot of the examples I found used the now outdated affix property. The other examples were collapsible, but I want the sidebar to always be open on desktop and tablet. I attached photos of how I designed it on desktop and mobile for further reference.
I know you are asking about bootstrap, but since you anyway use external library for such thing, maybe this small script would be a solution for you. It does exactly what you need: https://github.com/grzegorzgit/Litomobile
If your menu is based on ul and li, this script automaticaly creates animated mobile menu and icon for the window size you want.
I'd like to change the position of menubar from top to left on tvOS.
With Menu Bar Template, can we change the position of menu bar by for example changing the style of it?
I've looked over the TVML Styles of Apple's document, but I couldn't find anything about changing the position of menubar.
If I cannot change it with Menu Bar Template, I'm thinking to try to use UIKit instead of TVML Template...
I appreciate any comments for it.
Correct, you can't change the position of the menu bar, Apple is trying to keep the UI the same all over the Apps. Which is good for your users.
You should probably look into other templates that have a vertical layout, like the stack template, or paradeTemplate which probably makes more sense in your use case.
But the worse case you can create your own with tvinterfacefactory with native code.
I have a bit of a confusing issue. I'm building a website with bootstrap, and I have a bootstrap navbar that (when the page is shrunk down to mobile) shrinks the menu down to one box that drops down the menu options when you click it. The issue is that the navbar menu drops down only on the home page. I copy-pasted the html code for the navbar for the other pages, but still the mobile drop-down only works on the main page. Any thoughts on why this could be happening?
Do you have your vendor Javascript and Bootstrap Javascript linked on the other pages as well? It sounds like you have linked the Javascript files on your homepage but forgot to add it to the other pages.
It would help a lot to see your code.
A common problem I run into when building responsive websites is how to make a multi-level nav menu (3 or more levels) that works well for touch devices. I've seen a lot of plugins and techniques, but most of them fall flat because they don't allow a 2nd-level page to act as both a link to a page AND a parent of children in a sub-sub-menu. Some techniques address this by having an arrow icon that exposes the children menu items while clicking on the parent page name goes to the actual page... but on mobile devices these icons are usually very small targets and hence hard to use. Are there any other solutions to this problem (either jquery or javascript plugins, or straight-up CSS/JS code)?
I have a 'starting point' of sorts that I use for responsive web projects like this. I'm not sure if it's exactly what you need, but it allows for multi-level dropdown menus in desktop view. In mobile view, jQuery automatically creates an off-canvas menu.
Code:
https://github.com/kthornbloom/Responsive_Template
Demo:
http://rwd.kthornbloom.com/
Hope it helps!
Have you checked out any of the documentation surrounding touch-start events? I feel like you're going to get the best ux from this method. In your position, I'd be using tap to toggle classes onto your menu that would set the display to block (for example). Once your menu is open, you could then bind another touch event to the sub-level objects.
After our discussion in comments, it seems there isn't a straight forward way to get what you want due to the fact that we don't know what the user want after the submenu has been opened. There is no way for us to tell if they want to go to a link by clicking on the item again or collapse the submenu.
From this point, you have 2 options
Create a collapse once the menu is open and the user will know to use that to collapse the menu. If you think the size on most sites are small then make it bigger, however I don't think this will be an issue because it is so common.
Create a close button or something close to that for the entire menu. So when you click an item, it will expand, and if you click the same item again, it will go to the link. However there is collapsing the submenu until you click on the overall close button for the entire menu. This is only for tablets/phones as on desktop this should be a hover behaviour. This is similar to how the menu behaves on a tablet for http://www.lexus.ca. We actually have the menu closing if you click on the top most item again, you can see this behaviour on the phone or tablet. This is another option for you if the top level navs does not lead to pages.
Found a great write-up for a solution: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
I would love to use zurb foundation Navigation menus in bootstrap project but i am not sure how i can or is it possible to integrate zurb foundation menu for example one show in this example in bootstrap 2.3 http://foundation.zurb.com/docs/components/top-bar.html
I am facing couple of issue with boostrap menus like hover effect even after implementing few different methods i am still not happy with the bootstrap menu as i was both hover & click event to work effectively on both desktop and mobile devices.
Example which i have set up after here show one of the issue i face on mobile devices. you can try it for you self
So far i have see hover & click event works very smoothly on both desktop & mobile device.
I would appreciate help in this regard so that i can integrate only zurb foundation navigation menus in bootstrap project
What are the minimum files that i need to use beside app.css for menu to works like a charm.
You can customize the zurb-foundation download at http://foundation.zurb.com/download.php, first uncheck "all foundation components" then just check the "top bar" option.
Now, to use the top-bar foundation 4 within bootstrap, try to put the your top-bar class outside the div "cointainer"
Bootstrap 3 has a better nav-bar.