Hello,

I've used the Bootstrap videos to make a new Responsive skin. One problem I've run into is the operation of the Nav menu when I have both a parent and a child page. For example, if I have a top-level page called Sports and a child page called Baseball, when I click on the Sports link in the menu, i get a dropdown that shows the Baseball page. I can click on the Baseball menu item and get to the page but I can't click on the Sports menu item to get to the Sports page. It simply doesn't respond. It's as if the page is disabled but I know it's not.

I've done a lot of fiddling so I may have broken something so I was just wondering if this works for others of you.

Thanks,

Tom

I'd have to review the videos to hear if this is covered adequately, but ...

The design of the skin file in the Bootstrap skin uses a DDR Menu template named BootstrapMenu. The main work is done in a file ULXSLT.xslt. If you can understand an xslt file, you'll figure this out instantly. But, if you are like most of us, you'll have to dig or worse.

But here is the gist: the menu assumes that any toplevel page should be treated as a disabled page, and it does that. It does that via css -- I haven't quite figured that part out.

It also renders only the top and next level menu items. So, lover leverl links are not shown in the menu.

Thanks Joe,

That certainly seems to be the issue. I guess I should have known that but thanks for clarifying.

Yeah, at one point, I could slog through XSLT but I just don't have the energy anymore... I had sub menus on my Home page menu which meant that I couldn't get back Home except by using the link on the logo. Oh well, there are other options for my sub menus.

Thanks again for pointing this out.

Tom

Well, if you understand XSLT, you could look into modifying the template do do just what you want. Or the other alternative is to adapt the website to "fit" with the behavior of the menu template.

It may also be possible to adjust things so that the CSS for wider views doesn't disable the links. At some point I will have to figure this out ... but maybe some smart person here can do that and save all of us the work!

This is an interesting issue, One that I've not come to a conclusion with.

Obviously there are more and more touch screen devices activated every day so will it come to the point where it becomes the standard that top level menu items are simply a trigger to display the sub menu?

What is the ideal solution for both desktop view and mobile view?

I suppose one solution would be to divide the menu items into two, one half takes you to the parent page and the other drops the sub menu... much like the bootstrap buttons further down this page:

http://twitter.github.io/bootstrap/...nDropdowns

It may take some work but it is possible.

Does anyone fancy trying out this work in progress? I've attached a different version of the bootstrap menu template.

I realise it still needs some work on the tablet/mobile stacked version of the menu but I'd like to see if this is a feasible solution first. Perhaps I can then add this to the next bootstrap tutorial.

(Don't forget to backup the old bootstrap menu first.)

Thanks. I think that this is really helpful.

That's a great idea to use the split button/dropdown as menu items. Is that what your new BootstrapMenu does? I won't have a chance to try it until later.

I also just wanted to say thanks Andy and Joe for the Bootstrap skin tutorial. It was the basis for my new Responsive Metro skin I just built for my client - www.thehab.com - if you want to take a look. I think I still need a couple of tweaks for smaller devices but overall, it works well (I think).

Tom

Nice looking site!

(But don't thank me for the tutoria -- that's all Andy!)

To touchable devices like tablets or smart phone, there is no concept of "Hover". There is only concept of "Touch" which is equivalent to "Click" in PC. Thus, in order to a responsive menu be able to work on both touchable devices and PC, it has to disable "hover" attribute which help to expand sub-menu items in PC.
So a question posed: how to expand sub-menu items from the root one? Answer: We click on the root menu item.
But now the issue appears: if the root menu item itself is linked to a page, how to open that page?

Well, I did look at Andy's solution that divide the root menu into 2 parts . The first part is "1 level" menu item that would lead to the page it is linked to when we click on it (Or touch). The second part is a small arrow which acts as a nest of sub-menu items and it would expand when we click on it.
I have tried it but I still feel something wrong with it. May be about its appearance.

I have another idea that may be the solution as well: We can make the first touch to root menu item as the action to expand its the sub-menu items, the second touch (after the sub-menu items has been expanded) would act as a click to open the page which the root menu item is linked to by itself.

I am not sure this solution is feasible or not because I actually don't know how to deploy it. However, I am very happy if this idea would help.
Cheers,
Tim Nguyen

The Bootstrap 3 tutorial and it's menu seems to be friendlier on mobile devices that the Bootstrap 2 tutorial.