...

View Full Version : How to split a long list in a dropdown into 2 columns



stuckupvacant
11-24-2011, 02:47 PM
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



<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

sunfighter
11-24-2011, 04:37 PM
It can be done with css.


<!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>

stuckupvacant
11-24-2011, 05:19 PM
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




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*/
}

Excavator
11-24-2011, 07:30 PM
Hello stuckupvacant,
Give your dropped ul a width that will fit 2 li's side by side...
like this -

#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 */
}

stuckupvacant
11-25-2011, 12:26 PM
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=" "

Excavator
11-25-2011, 04:27 PM
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;}

stuckupvacant
11-25-2011, 05:01 PM
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



#navMenu ul ul #wider

{
position:absolute;
visibility: hidden;
top: 32px;

width: 500px;
}



HTML


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

Excavator
11-25-2011, 05:59 PM
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:
#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:
<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 (http://www.tizag.com/cssT/cssid.php).



.

stuckupvacant
11-28-2011, 01:54 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum