Results 1 to 5 of 5

Thread: Dropdow Menu not working with Slider

  1. #1
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dropdow Menu not working with Slider

    Hi Everyone!
    I realise there are a million threads on this already, ive ried to follow the instructions on there but its not making any difference to my site!
    the dropdown menus work no problem on every page except the index with my slider. I understand it is something to do with the z-index but i dont know which one.
    I'm pretty new to all this so would appreciate any help.


    Below is the css for my slider, and the menu.



    Code:
    #slider {
        width: 900px; /* important to be same as image width */
        height: 300px; /* important to be same as image height */
        position: relative; /* important */
    	overflow: hidden; /* important */
    	text-align:left;
    
    }
    
    #sliderContent {
        width: 900px; /* important to be same as image width or wider */
        position: absolute;
    	top: 0;
    	margin-left: 0;
    }
    
    .sliderImage {
        float: left;
        position: relative;
    	display: none;
    }
    
    .sliderImage span {
        position: absolute;
        padding: 10px;
        width: 300px;  /* This is the width of the caption box  */
    	height:300px; /* This is the height of the caption box  */
        background-color: #000;  /* This sets the background color of the semi transparent box */
        /* If you do not want the transparent content field to appear, change all opacity values to 0 */
    	filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:150%;
        color: #fff; /* This is the color of the text in the caption box */
        display: none;
    }
    
    .sliderImage span strong { 
    	color:#fff;  /* This is the color of the title text in the caption box */
    	font-size: 22px; /* This is the font size of the title text in the caption box */
    	line-height:300%;
    	}
    
    .clear { clear: both; }
    
    
    .top { top: 0; left: 600px; }  /* This sets the upper left corner of the caption box */
    
    .bottom { bottom: 0; left: 0; } /* This sets the lower left corner of the caption box */
    
    #slider ul 		{ list-style-type: none;}
    #slider ul li 	{ margin-left:0px; }
    
    
    and here it is for the menu
    
    @charset "UTF-8";
    
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /*******************************************************************************
    
     LAYOUT INFORMATION: describes box model, positioning, z-order
    
     *******************************************************************************/
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	cursor: default;
    	width: auto;
    	position:relative;
    	z-index:99999;
    	
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {position: relative;
    	z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 16px;
    	position: relative;
    	text-align: left;
    	cursor: pointer;
    	width: 180px;
    	float: left;
    	background-color: #666;
    	font-weight: bold;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {		border-top:1px #000 solid; border-bottom: 1px #000 solid;	
    					margin:	20px 0; padding: 10px 0;		
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	z-index: 1020;
    	cursor: default;
    	width: 180px;
    	position: absolute;
    	left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
    	left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
    	width: 180px;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
    	position: absolute;
    	margin: -5% 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
    	left: auto;
    	top: 0;
    }
    
    /*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
    	border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    	display: block;
    	cursor: pointer;
    	background-color: #666;
    	padding: 0.5em 0.75em;
    	color: #333;
    	text-decoration: none;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	color: #FFF;
    	background-image: url(../Images/icons/BUT.jpg);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    	color: #FFF;
    	background-image: url(../Images/icons/BUTHOVER.jpg);
    	background-repeat: repeat-x;
    }
    
    /*******************************************************************************
    
     SUBMENU INDICATION: styles if there is a submenu under a given menu item
    
     *******************************************************************************/
    
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarDown.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarRight.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
    	background-image: url(../Images/icons/BUT.jpg);
    	background-repeat: repeat-x;
    	background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
    	background-image: url(../Images/icons/BUT.jpg);
    	background-repeat: repeat-x;
    	background-position: 95% 50%;
    }
    
    /*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
    	position: absolute;
    	z-index: 1010;
    	filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    	ul.MenuBarHorizontal li.MenuBarItemIE
    	{
    		display: inline;
    		f\loat: left;
    		background: #FFF;
    	}
    }
    Last edited by jscheuer1; 05-01-2013 at 02:32 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    There do not appear to be any z-index values set for the slider in the css, and those set for the menu seem sufficiently high. However, one must assume that the slider is more than just css. In its javascript, the z-index may be getting set higher. And/or there could be other elements involved. If either the menu or the slider is inside another element, that element's z-index will often come into play as well. An element's effective z-index outside that parent element will be no higher and no lower than it's parent element's if that parent element is absolutely or relatively positioned.

    In any case though, to really tell what's going on we would need to see the page:

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 05-01-2013 at 02:54 PM. Reason: detail
    - John
    ________________________

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

  3. #3
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply!

    Here is the page I have the problem, its on my landing page.

    http://www.lumophoto.com

    As soon as i click into pages without the slider, the dropdown works.

    Also, is there any way of making the dropdown menus work on an iPad?

    Thanks again.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    The only problem I see is that there is no:

    Code:
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    on the index page. It belongs as the very last thing before the closing </body> tag, just like it is on the pages where the menu works.

    As for making the menu work on iPad, I'm not sure. Generally menus for touch devices need to open and close on click, not on mouse over. You could consult the Spry Menu people or a forum dedicated to that.

    We have a menu:

    http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    That can be setup to work on click, and that has been tested to work on touch devices. It can even be a hover menu for regular PC's, Macs, laptops, while being a click menu for touch devices. There probably are others around the web, perhaps even others on Dynamic Drive here. I only know of this one because I worked on it some. There may even be menus specifically for touch devices that use something other than click, but I don't know of any.
    - John
    ________________________

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

  5. #5
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's done it, thanks so much - I couldn't see the problem at all!
    I'll have a go at the new menu you suggested.

Similar Threads

  1. Slider Not Working In IE7 & 8
    By round in forum JavaScript
    Replies: 3
    Last Post: 10-27-2012, 09:01 AM
  2. Featured Content Slider: First image transition not working correctly
    By ADsevenfour in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-30-2012, 09:07 AM
  3. Featured Content Slider v2.4 - not working in IE7.0.5730.13
    By si86 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-06-2010, 12:23 PM
  4. Featured Content Slider and Lightbox not working together
    By riprod in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-26-2009, 04:07 PM
  5. Resolved Content Slider 2.4 - Fade stops working
    By mikka23 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-28-2009, 05:32 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
  •