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 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    Morley, UK
    Posts
    41
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How to split a long list in a dropdown into 2 columns

    Hello

    I have a dropdown that has one section with a long list that I need too split so that when the mouse hovers over it,

    it is displayed as 2 shorter columns, instead of 1 long one

    Code:
    <li><a href="#">Clubs</a> 
                    
    <ul> 
    <li><a href="clubs-adwalton.html">Adwalton</a>  </li>
    <li><a href="clubs-altofts.html">Altofts</a>  </li>
    <li><a href="clubs-azaad.html">Azaad</a>  </li> 
    <li><a href="clubs-batley.html">Batley</a>  </li>
    <li><a href="clubs-birstall.html">Birstall</a>  </li>
    <li><a href="clubs-brighouse.html">Brighouse</a>  </li>
    <li><a href="clubs-carlton.html">Carlton</a>  </li>
    <li><a href="clubs-cleckheaton.html">Cleckheaton</a>  </li>
    <li><a href="clubs-driglington.html">Drighlington</a>  </li>
    <li><a href="clubs-eastardsley.html">East Ardsley</a>  </li>
    <li><a href="clubs-gildersome.html">Gildersome</a>  </li>
    <li><a href="clubs-gomersal.html">Gomersal</a>  </li>
    <li><a href="clubs-hangingheaton.html">Hanging Heaton</a>  </li>
    <li><a href="clubs-hartsheadmoor.html">Hartshead Moor</a>  </li>
    <li><a href="clubs-holmevalleygirls.html">Holme Valley Girls</a>  </li>
    <li><a href="clubs-hunsletnelson.html">Hunslet Nelson</a>  </li>
    <li><a href="clubs-liversedge.html">Liversedge</a>  </li>
    <li><a href="clubs-methley.html">Methley</a>  </li>
    <li><a href="clubs-mirfield.html">Mirfield</a>  </li>
    <li><a href="clubs-mirfieldpc.html">Mirfield PC</a>  </li>
    <li><a href="clubs-moorlands.html">Moorlands</a>  </li>
    <li><a href="clubs-morley.html">Morley</a>  </li>
    <li><a href="clubs-newfarnley.html">New Farnley</a>  </li>
    <li><a href="clubs-ossett.html">Ossett</a>  </li>
    <li><a href="clubs-rothwell.html">Rothwell</a>  </li>
    <li><a href="clubs-scholes.html">Scholes</a>  </li>
    <li><a href="clubs-townville.html">Townville</a>  </li>
    <li><a href="clubs-wakestmichs.html">Wake St Michaels</a>  </li>
    <li><a href="clubs-wakethornes.html">Wakefield Thornes</a>  </li>
    <li><a href="clubs-westbretton.html">West Bretton</a>  </li>
    <li><a href="clubs-wrenthorpe.html">Wrenthorpe</a>  </li>
    </ul>
    </li>
    Can someone advise on the html code and where to put it to split the dropdown

    Thanks

    Rob

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,597
    Thanks
    23
    Thanked 646 Times in 645 Posts
    It can be done with css.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--[if lt IE 7]>
    <script type="text/javascript">
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" over";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    <style type="text/css">
    body {
    	font: x-small Verdana, Arial, Helvetica, sans-serif;
    }
    * html body{
    	font-size:xx-small;
    }
    ul#nav{
    float:left;
    }
    ul#nav, ul#nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	position: relative;
    }
    ul#nav  li {
    	float: left;
    	width:149px;
    }
    #nav li ul {
    	position: absolute;
    	margin-left: -999em; /* hide menu from view */
    	top: 2.3em;
    	left:0;
    	width:306px;
    	border-top:1px solid red;
    }
    #nav li ul li{
    	width:300px;
    	border:1px solid red;
    	border-top:none;
    	background:#06c;
    	float:left;
    	padding:2px;
    }
    #nav li ul ul{
    	position:relative;
    	float:left;
    	width:140px;
    	margin:0 5px 0 0;
    	display:inline;
    	top:0;
    	border:none;
    }
    #nav li ul li li{
    	border:none;
    	width:140px;
    	padding:0;
    	margin:2px 0;
    	background:#06c;
    }
    ul#nav li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background:#fee; /* IE6 Bug */
    	padding: 5px;
    	border-right: 1px solid #fff;
    	min-height:0;
    }
    #nav li li a {
    	padding: 2px 5px;
    	color:#fff;
    	background:#06c;
    	border:none;
    }
    ul#nav li.over a,ul#nav li:hover a{
    	border:1px solid red;
    	border-bottom:none;
    	top:1px;
    	position:relative;
    	z-index:99;
    	padding:5px 5px 5px;
    }
    ul#nav li.over li a,ul#nav li:hover li a{top:0;border:none}
    /* commented backslash mac hiding hack \*/
    * html ul#nav  li a {height:1%;	position:relative;}
    /* end hack */
    #nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/
    
    #nav li:hover a,#nav  li.over a { background-color:#06c;border-bottom:1px solid #06c;color:#fff;}
    #nav li:hover li a:hover,#nav li.over li a:hover{background:#fffccc;color:red}
    #nav li:hover li a,#nav li.over li a {
       color: #fff;
       background-color: #06c;
    }
    </style>
    </head>
    <body>
    <ul id="nav">
    	<li><a href="#">Clubs</a>
    		<ul>
    			<li>
    				<ul>
    					<li><a href="clubs-adwalton.html">Adwalton</a>  </li>
    					<li><a href="clubs-altofts.html">Altofts</a>  </li>
    					<li><a href="clubs-azaad.html">Azaad</a>  </li>
    					<li><a href="clubs-batley.html">Batley</a>  </li>
    					<li><a href="clubs-birstall.html">Birstall</a>  </li>
    					<li><a href="clubs-brighouse.html">Brighouse</a>  </li>
    					<li><a href="clubs-carlton.html">Carlton</a>  </li>
    					<li><a href="clubs-cleckheaton.html">Cleckheaton</a>  </li>
    					<li><a href="clubs-driglington.html">Drighlington</a>  </li>
    					<li><a href="clubs-eastardsley.html">East Ardsley</a>  </li>
    					<li><a href="clubs-gildersome.html">Gildersome</a>  </li>
    					<li><a href="clubs-gomersal.html">Gomersal</a>  </li>
    					<li><a href="clubs-hangingheaton.html">Hanging Heaton</a>  </li>
    					<li><a href="clubs-hartsheadmoor.html">Hartshead Moor</a>  </li>
    					<li><a href="clubs-holmevalleygirls.html">Holme Valley Girls</a>  </li>
    					<li><a href="clubs-hunsletnelson.html">Hunslet Nelson</a>  </li>
    
    				</ul>
    				<ul>
    					<li><a href="clubs-liversedge.html">Liversedge</a>  </li>
    					<li><a href="clubs-methley.html">Methley</a>  </li>
    					<li><a href="clubs-mirfield.html">Mirfield</a>  </li>
    					<li><a href="clubs-mirfieldpc.html">Mirfield PC</a>  </li>
    					<li><a href="clubs-moorlands.html">Moorlands</a>  </li>
    					<li><a href="clubs-morley.html">Morley</a>  </li>
    					<li><a href="clubs-newfarnley.html">New Farnley</a>  </li>
    					<li><a href="clubs-ossett.html">Ossett</a>  </li>
    					<li><a href="clubs-rothwell.html">Rothwell</a>  </li>
    					<li><a href="clubs-scholes.html">Scholes</a>  </li>
    					<li><a href="clubs-townville.html">Townville</a>  </li>
    					<li><a href="clubs-wakestmichs.html">Wake St Michaels</a>  </li>
    					<li><a href="clubs-wakethornes.html">Wakefield Thornes</a>  </li>
    					<li><a href="clubs-westbretton.html">West Bretton</a>  </li>
    					<li><a href="clubs-wrenthorpe.html">Wrenthorpe</a>  </li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    Morley, UK
    Posts
    41
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Sunfighter thanks for the reply

    Can you break it down a little

    I understand everything you've written, but I was amusing it was a tweak to one or two lines - possibly of the css file

    here is mine for the menu

    Plus I don't use any JS for the menu

    Code:
    body 
    {
    padding:0; /* this removes any space at the top of the page */
    margin:0;/* this removes any space at the top of the page */
    border:0;
    background-color:gold;
    }
    
    #wrapper 
    {
    padding:5px; /* this removes/adds any space at the top of the page */
    margin: 0 auto; /* this centers the whole Menu on the page */
    width: 1100px;
    height: auto;
    }
    
    #banner
    {
    padding: 5px; /* this changes the size of the Main Title space at the top of the page */
    margin: 0;
    border: 0;
    width: 1100px;
    height: 40px;
    background-color:green;
    text-align:center; 
    font-family: times new roman;
    font-size: 24px;
    color:gold; 	
    }
    
    
    
    
    #footer /* this changes the area at the bottom of the website  */
    {
    padding: 0;
    margin: 0;
    border: 0;
    width: 1105px;
    height: 30px;
    background-color:gold;
    color:green;
    text-align:center;  	
    }
    
    
    #navMenu /* this is the menu wapper that appears on the screen, it applies to whole menu
                it doesn't contorl the actual headers */
    {
    padding-left:2px;
    width: 1108px; /* This is how wide the Main menu background appears. Alter in relation to how many header boxes there are*/
    height: 40px; /* This is how high the main menu background appears- Note: the header boxes stay the same size*/
    background-color:green; /* This is the colour of the main menu background- Note: the header boxes stay the same colour*/
    overflow:visible; 
    padding-bottom: 5px;
    }
    
    #navMenu ul /* Moves the links from a staggered effect to appear underneath each other*/
    {
    margin:0;
    padding: 0px;
    line-height:30px; /* Effects the position of the text in the link boxes*/
    }
    
    #navMenu li /* this makes the headers appear in a line next to each other rather than on top of each other  */
    {
    margin:0;
    padding:0px;
    list-style:none; /* "none" removes the bullet point syle list markers */ 
    position: relative;
    background-color:green; /* This is the colour of the header boxes */
    float: left; /* Orders the headers to read from left to right, Changing float to "Right" would make to read backwards*/
    z-index: 4; /* This causes the Dropdown to appear above/on top of everything else- ie if you put a static picture in
    It can display on top of the dropdown- blocks the menu- this solves that issue */ 			
    }
    
    #navMenu ul li a /* This alters the style of the header Boxes (links) */
    {
    text-align:center; /* positions the text with the header box*/
    font-family: times new roman; /* changes style/font of the text*/
    text-decoration:none; /* removes auto decoration eg- undeline of hyperlinks */ 
    height: 30px; /* Changes the size of the header box*/
    width: 180px;/* Changes the width of the header box*/
    display:block;
    color:gold; /* Changes the colour of the header box text*/
    border: 2px white solid; /* Changes the width and colour of the header box borders- remove or hide to remove border effect*/
    }
    
    #navMenu ul ul  /* first level drop down- when you hover over the header, this styles what appears*/
    {
    position:absolute;
    visibility: hidden;	/* this hides the links until you hover over them, then they appear, changing to "visible" will make them all appear */
    top: 32px; /* This alters how far down the links appears from the Header, the bigger the number the further down the page */
    }
    
    
    /* creates a hover effect - without it the links all appear at once  */
    #navMenu ul li:hover ul 
    {
    visibility: visible; /* Changing to hidden will hide all the drop down links */
    }
    
    #navMenu ul li:hover 
    {
    background-color:#68d1e7 /* This changes the colour of any box when you hover the mouse over it*/
    }
    
    #navMenu a:hover
    {
    color:black; /* This changes the colour of any text when you hover the mouse over it*/
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello stuckupvacant,
    Give your dropped ul a width that will fit 2 li's side by side...
    like this -
    Code:
    #navMenu ul ul  /* first level drop down- when you hover over the header, this styles what appears*/ {
    width: 368px;
    	position:absolute;
    	visibility: hidden;	/* this hides the links until you hover over them, then they appear, changing to "visible" will make them all appear */
    	top: 32px; /* This alters how far down the links appears from the Header, the bigger the number the further down the page */
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2011
    Location
    Morley, UK
    Posts
    41
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Excavator

    That has worked to an extent- but all of the dropdown is affected

    I need to isolate this one li "clubs" and make it split and leave the rest as is

    would it be a class=" "

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Yes, #menu ul ul would affect all dropped ul's. To target only one you would need to give it an id or class... something like #menu ul ul#wider {width: 368px;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Nov 2011
    Location
    Morley, UK
    Posts
    41
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Excavator

    I must be doing something wrong as I have tried the above to no effect

    It just displays as the orignal long dropdown

    CSS
    Code:
    #navMenu ul ul #wider 
    
    {
    position:absolute;
    visibility: hidden;	
    top: 32px; 
    
    width: 500px;
    }
    HTML
    Code:
     <li><a href="#" class="wider">Clubs</a>                
    <ul> 				
    <li><a href="clubs-adwalton.html">Adwalton</a>   </li> 	
    <li><a href="clubs-altofts.html">Altofts</a>  </li>
    <li><a href="clubs-azaad.html">Azaad</a>  </li> 
    <li><a href="clubs-batley.html">Batley</a>  </li>
    <li><a href="clubs-birstall.html">Birstall</a>  </li>
    <li><a href="clubs-brighouse.html">Brighouse</a>  </li>
    <li><a href="clubs-carlton.html">Carlton</a>  </li>
    <li><a href="clubs-cleckheaton.html">Cleckheaton</a>  </li>
    <li><a href="clubs-driglington.html">Drighlington</a>  </li>
    <li><a href="clubs-eastardsley.html">East Ardsley</a>  </li>
    <li><a href="clubs-gildersome.html">Gildersome</a>  </li>
    <li><a href="clubs-gomersal.html">Gomersal</a>  </li>
    <li><a href="clubs-hangingheaton.html">Hanging Heaton</a>  </li>
    <li><a href="clubs-hartsheadmoor.html">Hartshead Moor</a>  </li>
    				
    <li><a href="clubs-holmevalleygirls.html">Holme Valley Girls</a>  </li>
    <li><a href="clubs-hunsletnelson.html">Hunslet Nelson</a>  </li>
    <li><a href="clubs-liversedge.html">Liversedge</a>  </li>
    <li><a href="clubs-methley.html">Methley</a>  </li>
    <li><a href="clubs-mirfield.html">Mirfield</a>  </li>
    <li><a href="clubs-mirfieldpc.html">Mirfield PC</a>  </li>
    <li><a href="clubs-moorlands.html">Moorlands</a>  </li>
    <li><a href="clubs-morley.html">Morley</a>  </li>
    <li><a href="clubs-newfarnley.html">New Farnley</a>  </li>
    <li><a href="clubs-ossett.html">Ossett</a>  </li>
    <li><a href="clubs-rothwell.html">Rothwell</a>  </li>
    <li><a href="clubs-scholes.html">Scholes</a>  </li>
    <li><a href="clubs-townville.html">Townville</a>  </li>
    <li><a href="clubs-wakestmichs.html">Wake St Michaels</a>  </li>
    <li><a href="clubs-wakethornes.html">Wakefield Thornes</a>  </li>
    <li><a href="clubs-westbretton.html">West Bretton</a>  </li>
    <li><a href="clubs-wrenthorpe.html">Wrenthorpe</a>  </li>
    						
    </ul>
    </li>

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    In my example I am adding the width to the dropped ul that has the id "wider"

    In your example you're adding the class "wider" to an anchor.


    Make your CSS look like this:
    Code:
    #navMenu ul ul  /* first level drop down- when you hover over the header, this styles what appears*/ {	position:absolute;
    	visibility: hidden;	/* this hides the links until you hover over them, then they appear, changing to "visible" will make them all appear */
    	top: 32px; /* This alters how far down the links appears from the Header, the bigger the number the further down the page */
    }
    #navMenu ul ul#wider {width: 368px;}
    And your markup should look like this:
    Code:
    <li><a href="#">Clubs</a> 
                    
    <ul id="wider"> 
    <li><a href="clubs-adwalton.html">Adwalton</a>  </li>
    <li><a href="clubs-altofts.html">Altofts</a>  </li>
    <li><a href="clubs-azaad.html">Azaad</a>  </li> 
    <li><a href="clubs-batley.html">Batley</a>  </li>
    <li><a href="clubs-birstall.html">Birstall</a>  </li>
    <li><a href="clubs-brighouse.html">Brighouse</a>  </li>
    <li><a href="clubs-carlton.html">Carlton</a>  </li>
    <li><a href="clubs-cleckheaton.html">Cleckheaton</a>  </li>
    <li><a href="clubs-driglington.html">Drighlington</a>  </li>
    <li><a href="clubs-eastardsley.html">East Ardsley</a>  </li>
    <li><a href="clubs-gildersome.html">Gildersome</a>  </li>
    <li><a href="clubs-gomersal.html">Gomersal</a>  </li>
    <li><a href="clubs-hangingheaton.html">Hanging Heaton</a>  </li>
    <li><a href="clubs-hartsheadmoor.html">Hartshead Moor</a>  </li>
    <li><a href="clubs-holmevalleygirls.html">Holme Valley Girls</a>  </li>
    <li><a href="clubs-hunsletnelson.html">Hunslet Nelson</a>  </li>
    <li><a href="clubs-liversedge.html">Liversedge</a>  </li>
    <li><a href="clubs-methley.html">Methley</a>  </li>
    <li><a href="clubs-mirfield.html">Mirfield</a>  </li>
    <li><a href="clubs-mirfieldpc.html">Mirfield PC</a>  </li>
    <li><a href="clubs-moorlands.html">Moorlands</a>  </li>
    <li><a href="clubs-morley.html">Morley</a>  </li>
    <li><a href="clubs-newfarnley.html">New Farnley</a>  </li>
    <li><a href="clubs-ossett.html">Ossett</a>  </li>
    <li><a href="clubs-rothwell.html">Rothwell</a>  </li>
    <li><a href="clubs-scholes.html">Scholes</a>  </li>
    <li><a href="clubs-townville.html">Townville</a>  </li>
    <li><a href="clubs-wakestmichs.html">Wake St Michaels</a>  </li>
    <li><a href="clubs-wakethornes.html">Wakefield Thornes</a>  </li>
    <li><a href="clubs-westbretton.html">West Bretton</a>  </li>
    <li><a href="clubs-wrenthorpe.html">Wrenthorpe</a>  </li>
    </ul>
    </li>
    See this link about class vs id.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    stuckupvacant (11-28-2011)

  • #9
    New Coder
    Join Date
    Nov 2011
    Location
    Morley, UK
    Posts
    41
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Excavator

    That's got it working,

    Thanks for helping, for what was probably a 10 minute job for yourself, I had been searching for a week or so for an answer to this


  •  

    Posting Permissions

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