Drae Posted October 5, 2012 Share Posted October 5, 2012 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 More sharing options...
es131245 Posted October 5, 2012 Share Posted October 5, 2012 (edited) 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 April 18, 2014 by es131245 1 Link to comment Share on other sites More sharing options...
Drae Posted October 6, 2012 Author Share Posted October 6, 2012 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 More sharing options...
es131245 Posted October 10, 2012 Share Posted October 10, 2012 (edited) 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 October 11, 2012 by es131245 Link to comment Share on other sites More sharing options...
es131245 Posted October 12, 2012 Share Posted October 12, 2012 (edited) 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 October 12, 2012 by es131245 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now