Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make dropdown menu expand left rather than right if screen edge.

    Hello Folks,

    I installed a template on the following site and did not actually write the javascript dropdown menu seen at the top of http://sthomaslc.com/

    The problem is that if parent list items Ministries and Parish Leadership have enough children, they expand out right off of the screen of low resolution setups.

    I am totally new to javascipt programming so excuse my ignorance when I ask how to make the children items to expand out left instead of right if it's detected that the menu has hit the right side of the browser window.

    Best Regards

    David

  • #2
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    anylinkcssmenu.js needed to load to the left

    I too am trying to have the dropdown menu show to the left not right.
    Any help would be appreciated.
    Thanks,
    Brett

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    For dbmathis, look in the horiz_menu.css file, go down till you find these three items.
    Code:
    #horiz-menu ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	float:left;	z-index:50 !important;
    }
    
    #horiz-menu li {
    	display: block;
    	float: left;
    	margin: 0 1px 0 0;
    	padding: 0;	z-index:50 !important;
    }
    
    #horiz-menu a,
    #horiz-menu li.active a {
    	white-space: nowrap;
    	display: block;
    	float: left;
    	height: 30px;
    	line-height: 30px;
    	padding: 0 17px;
    	font-weight:bold;
    	font-size: 100%;
    	overflow: hidden; z-index:50 !important;
    }
    Where it says float:left, change that to float:right, and report back please.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The positioning of the flyout menu on :hover is coming from this css (in moomenu.css):

    Code:
    .menutop li li:hover ul, .menutop li li.sfHover ul, 
    .menutop li li li:hover ul, .menutop li li li.sfHover ul, 
    .menutop li li li li:hover ul, .menutop li li li li.sfHover ul{
    left:177px; top:0px; z-index:50;
    }
    This is placing the left margin of the absolutely positioned flyout menu 177px from the top left corner of its parent - which is effectively immediately to the right of it. In order for the flyout to appear on the other side the left setting needs to be -177px.

    To target only the "Ministries" menu for this, and let the other menus behave as now, you could assign a class (let's say 'leftmenu') to the Ministries li tag, and then use something like:

    Code:
    .menutop li.leftmenu li:hover ul, .menutop li.leftmenu li.sfHover ul, 
    .menutop li.leftmenu li li:hover ul, .menutop li.leftmenu li li.sfHover ul, 
    .menutop li.leftmenu li li li:hover ul, .menutop li.leftmenu li li li.sfHover ul{
    left:-177px; top:0px; z-index:50;
    }
    This should probably be in the css forum.
    Last edited by SB65; 09-23-2010 at 05:18 PM.

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SB65 Thanks.

    I could not use your example verbatim because the Joomla! menu system is pretty inflexible, but i was able to use the classes that get assigned to the parent list items in place of leftmenu and it worked like a charm. Thanks for you help, was perfect.

    Best regards

    David

  • #6
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I have the same question as dbmathis, and for give me for assuming but I don't think the answers given here are what we are looking for. I have the same issue with a JavaScript dropdown menu and I have seen (can't remember the location of the sites unfortunately) dropdowns that appear change direction when they hit the edge of a specified container div. Is there a such thing as edge detection or hit tests in jQuery or javascript or do people just make new classes with float:right for the menus that are in danger of going off screen?

    I'm hoping there is a way to do this with javascript because doing this with CSS would be very inconvenient with code that is dynamicly generated through a CMS.


  •  

    Posting Permissions

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