Submenu's in Smooth Navigation Menu not working with bootstrap css

[mematrix]

1) Script Title: Smooth Navigational Menu (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: Submenu's are not working in Smooth Navigational Menu if it is used along with bootstrap css files. I am using bootstrap for layout design.
This is happening in Chrome and IE 9. Working fine in firefox.

Please let me know how to fix this.

[jscheuer1]

I will check later. But without looking at the attached files I will say (in case it doesn't) that css for the menu should follow all other css for the page. And that even if you are only using one or the other types of menu (horizontal or vertical), both menu css files should be associated with the page as described on its demo page.

I will also now note that any css that you chose to use on a page can potentially conflict with any other css for that page, and that bootstrap can be pretty extreme (overkill), at least the versions of it I have seen.

[jscheuer1]

OK, I've looked at your archive. Apparently something about bootstrap is triggering something in the script that causes it to set individual ul elements in the menu to overflow hidden. I worked on this menu, and I recall that under certain browser conditions (older IE I think, but branching was done on the basis of measurements, not browser sniffing) that was desirable. But in this case bootstrap is triggering it in an undesirable manner. In Chrome (and probably most if not all current browsers) this can be fixed in your demo by adding (highlighted):

    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
	
	<link rel="stylesheet" type="text/css" href="assets/css/menu/ddsmoothmenu.css" />
<style type="text/css">
.ddsmoothmenu ul, .ddshadow {overflow: visible !important;}
</style>

You could of course instead add its rule (red) to the end of the ddsmoothmenu.css file.

Again, in my opinion bootstrap is pretty extreme and might not be the best fit for a complex web site. Also, although this solution works for a simple demo, the more complex a page becomes, the more of a chance other issues may arise.

[mematrix]

Thanks. Submenu's in Smooth menu works now. But hover is not working in chrome. It works in other browsers.
The main reason to use bootstrap is we need not worry about supporting different browsers and alignment across different screen resolutions. We are spending a lot of time in certifying a new browser. I thought using bootstrap would fix most of these issues.

[jscheuer1]

I worked this out in Chrome. Do you mean to say that when you hover over a trigger in Chrome it's drop down doesn't appear, or that you are not seeing the hover styles (darkening of the hovered item)? Both work in Chrome here with the added style from my last post on the demo you provided. If you are having a problem with a different, more complex page, then I would have to see that.

The concept behind bootstrap is a good one. But, as I said before, I think it's extreme and overkill. Scripts and layouts that are not designed with bootstrap in mind can easily be disrupted by it. There are other less extreme ways to zero out margins, padding and normalize at least the most common discrepancies among browsers. However, even these need not be worried about if your layout is not "pixel perfect". The web is not a magazine or a TV show. The goal is not to have your site look the same on all devices and browsers, rather to have it be accessible on as many as possible. If something is 5px 'off' in one scenario as opposed to another, that shouldn't break the layout, and even if it does a little, the site should still be navigable and legible.

[josephdowell]

thanks for the file!

_________________
approval pre paid credit cards
instant approval for credit cards with bad credit