Jump to content

Drop-Down Menus - Any help?


Drae

Recommended Posts

Hey guys! I spent a few hours last night trying to code a drop-down menu to work on a MyBB forum skin I am working on, and even though I had put about no having the bullet-points and such, they were still coming up. I'll post the code I did later today when I have finished work (if I didn't delete it), but any suggestions as to where I might have been going wrong? I also do not want to code one that looks like those input fields, but rather the other sort that looks more pleasing and fits in better. (Will screenshot an example later for you for the desired effect I'm trying to get.)

Link to comment
Share on other sites

Ive done my drop down list this way...

<td class="[url=""]extra[/url]"><img src="[url="view-source:http://www.domain.com/source/images/list.png"]/source/images/list.png[/url]" alt="[url=""]list[/url]" /><ul id="[url=""]extra[/url]"><li><a href="[url="view-source:http://www.domain.com/1"]/1[/url]">one</a></li><li><a href="[url="view-source:http://www.domain.com/2"]/hash[/url]">two</a></li><li><a href="[url="view-source:http://www.domain.com/3"]/3[/url]">three</a></li></ul></td>
able.page tr.navigation td.navigation table.navigation tr td.extra{background-color:#2a2;box-shadow:0 0 2px white,inset 0 0 5px white;width:26px;}table.page tr.navigation td.navigation table.navigation tr td.extra ul#extra{background-color:#2a2;border-radius:5px;box-shadow:inset 0 0 5px white;display:none;list-style-type:none;margin:0;;padding:0;position:absolute;text-align:center;width:135px;}table.page tr.navigation td.navigation table.navigation tr td.extra:hover ul#extra{display:block;}table.page tr.navigation td.navigation table.navigation tr td.extra ul#extra li a{color:#00f;text-shadow:0 0 5px white,0 0 1px blue;}table.page tr.navigation td.navigation table.navigation tr td.extra ul#extra li:hover a{color:white;text-shadow:0 0 5px blue;}
Edited by es131245
  • Like 1
Link to comment
Share on other sites

Thanks. This is how I tried to do it. I think it's known as a suckerfish drop-down menu lol! I haven't added the actual URLs yet as I'm just trying to get it to display properly first.

[b]<[url=""]ul [i]class=[/i][s]"topbar"[/s][/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG1[b]<[url=""]/a[/url]>[/b][b]<[url=""]ul[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG1B[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG1C[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]/ul[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG2[b]<[url=""]/a[/url]>[/b][b]<[url=""]ul[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG2B[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG2C[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]/ul[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]/ul[/url]>

[/b][b][b]ul.topbar, ul.topbar ul [/b]{[u][url=""]margin[/url]:0;[url=""]padding[/url]:0;[url=""]list-style-type[/url]:none !important;[url=""]float[/url]:left;[url=""]border[/url]:1px solid #2c212d;[url=""]background[/url]:url([s]http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/thead_bg.gif[/s]) top left repeat-x #2c212d;[/u]}[b]ul.topbar li [/b]{[u]	[url=""]float[/url]:left;[url=""]width[/url]:200px;[url=""]background[/url]:url([s]http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/thead_bg.gif[/s]) top left repeat-x #2c212d;[/u]}[b]ul.topbar li ul [/b]{[u]	[url=""]width[/url]:200px;[url=""]position[/url]:absolute;[url=""]left[/url]:-999em; [/u]}[b].topbar [url=""]li[/url]:hover ul [/b]{[u]	[url=""]left[/url]:auto;[/u]}[b]ul.topbar a [/b]{[u]	[url=""]display[/url]:block;[url=""]color[/url]:#f5f5f5;[url=""]text-decoration[/url]:none;[url=""]padding[/url]:5px 5px;[url=""]border-right[/url]:1px solid #2c212d;[url=""]border-left[/url]:1px solid #2c212d;[/u]}[b]ul.topbar li li a [/b]{[u]	[url=""]border-top[/url]:1px solid #2c212d;[url=""]border-bottom[/url]:1px solid #2c212d;[url=""]border-left[/url]:1px solid #2c212d;[url=""]border-right[/url]:1px solid #2c212d;[/u]}[b]ul [url=""]a[/url]:hover,ul [url=""]a[/url]:focus [/b]{[u]	[url=""]color[/url]:#000;[url=""]background[/url]: #2c212d;[/u]}

And it just worked lol! I noticed the .topbar li:hover ul had randomly added some extra coding to itself due to the software lol!Thanks for your help![/b]

Link to comment
Share on other sites

hey got to work new drop down list...

		<ul id="try">		 <li><a href="/projects">Проекты</a></li>		 <li><a href="/hash">Хеш</a></li>		 <li><a href="/digits">Числа</a></li>		</ul><script type="text/javascript">function sometry(n){n++;$('#try li').eq(n).slideToggle(500);if($('#try li').size()>=n){setTimeout(function(){sometry(n);},500);}}$('#try li:not(:first)').slideToggle(0);$('td.try').hover(function(){sometry(0)});</script>

Edited by es131245
Link to comment
Share on other sites

same but consequently

	   <td class="extra">		<img src="/source/images/tools.png" alt="tools" />		<ul id="extra">		 <li><a href="/projects">Проекты</a></li>		 <li><a href="/hash">Хеш</a></li>		 <li><a href="/digits">Числа</a></li>		</ul>	   </td>

td.extra{background-color:#2a2;box-shadow:0 0 2px white,inset 0 0 5px white;width:28px;}td.extra ul#extra{background-color:#2a2;border-radius:0 0 5px 5px;box-shadow:-2px -5px 5px white inset,2px -5px 5px white inset;list-style-type:none;margin:0;padding:0;position:absolute;right:2px;text-align:center;width:135px;}td.extra:hover ul#extra{display:block;}td.extra ul#extra li:last-child{padding-bottom:12px;}td.extra ul#extra li a{color:#00f;text-shadow:0 0 5px white,0 0 1px blue;}td.extra ul#extra li:hover a{color:white;text-shadow:0 0 5px blue;}

function extraSlide(n,afterf){n++;$('#extra li').eq(n).slideToggle(200);if($('#extra li').size()>=n){setTimeout(function(){extraSlide(n,afterf);},100);}else{if(typeof(afterf)!=='undefined'){return afterf();}}}$(document).ready(function(){$('#extra li').slideToggle(-1);$('td.extra').hover(function(){$('td.extra').animate({width:'135px'},function(){extraSlide(-1);});},function(){extraSlide(-1,function()  {$('td.extra').animate({width:'28px'});});});});

Edited by es131245
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...