Results 1 to 6 of 6

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

  1. #1
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.
    Attached Files Attached Files

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
        <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.
    Last edited by jscheuer1; 09-20-2014 at 04:18 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

Similar Threads

  1. Smooth menu - submenu offset
    By enchant1 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-26-2014, 04:56 PM
  2. Smooth Navigational Menu (v1.5) Submenu Placement
    By BJBIX in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-08-2012, 05:07 PM
  3. Smooth Navigation Menu...Not so Smooth
    By neogeekgirl in forum JavaScript
    Replies: 0
    Last Post: 02-25-2010, 04:56 PM
  4. Submenu Repositioning on Smooth Navigational Menu
    By sime0n in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-03-2008, 11:33 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •