|
[ C ] Submenu Drop Down Box
|
|
Topic Started: Jun 1 2013, 07:29 PM (1,443 Views)
|
|
welshtony
|
Jun 1 2013, 07:29 PM
Post #1
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
Board Address: www.f6oc.co.uk Board Software: ZetaBoards Description: dropdown menu to tidy up the submenu
Iv been looking through search and so far I think the best version I can find is this 1 http://if.invisionfree.com/single/?p=17320109&t=5157078 But that 1 requires you to post in the CSS and by the looks of it just adds more links rather than replacing links already there.
I want this to work on all themes and to replace a hand full of the links.
I basically have 10 there at the moment and another 2 or 3 webpages being made up soon. I want to try and bring it down to say a max of 5 and have the rest in a drop down menu. I want this menu in the submenu and I know there are codes to add it up the top next to inbox buts thats not what I want.
Any ideas?
Thanks
|
|
|
| |
|
DaPizzaMan
|
Jun 1 2013, 10:54 PM
Post #2
|
#TeamSupport
- Posts:
- 5,109
- Group:
- Support Team
- Member
- #386,619
- Joined:
- September 28, 2010
- I'm Browsing With
- Safari · Chrome
- My Board URL
- http://s4.zetaboards.com/zbThemes/index/
|
- Code:
-
<script type="text/javascript"> if ($.zb.logged_in) { $('#top_menu').append('<li id="submenu-links"><a href="' + main_url + '">Links</a><ul></ul></li>');
for (var n = 0; n < $('#submenu a').length; n++) { var links = $('#submenu a').eq(n).wrap('<div />').parent().html(); $('#submenu-links ul').append('<li>' + links + '</li>'); }
$('#submenu').hide(); } </script> The code will also remove the actual submenu, but if you would like to have both the submenu display and the drop menu then remove the last line of the code.
|
|
|
| |
|
Cory
|
Jun 1 2013, 11:00 PM
Post #3
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Here's an alternative version you may be interested in: http://s1.zetaboards.com/Cory/index/
|
|
|
| |
|
welshtony
|
Jun 1 2013, 11:03 PM
Post #4
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
Nice code DaPizzaMan but isnt what I want sorry.
O now Cory that looks like something that I would like
|
|
|
| |
|
Cory
|
Jun 2 2013, 12:34 AM
Post #5
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Admin CP Themes Board Template Javascripts- Code:
-
<style type="text/css"> #submenu { text-align: center; padding: 0; }
#menu { padding: 0; font-size: 0; }
#menu li { display: inline-block; padding: 0; margin: 0; font-size: 14px; }
#menu li a { display: inline-block; width: 100px; height: 25px; line-height: 25px; text-align: center; }
#menu > li > a { margin-bottom: -1px; }
#menu ul { display: none; position: absolute; left: 1px; margin-top: 31px; margin-left: -40px; }
#menu li:hover > ul { display: inline; }
#menu ul li, #menu ul a { display: block; }
#menu ul > li > ul { margin-left: 110px; margin-top: -32px; }
#menu li > ul > li > a { position: relative; z-index: 1; } </style> Admin CP Themes Board Template Below the Board- Code:
-
<ul id="menu"> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a></li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> </ul> </li> </ul>
<script type="text/javascript"> //<![CDATA[ $(function () { $('#submenu a').hide(); $('#menu').prependTo('#submenu'); $('#menu ul ul').parent('li').addClass('sub'); var sBG = $('ul.drop_menu ul li a').css('background-color'); var sBO = $('ul.drop_menu ul li a').css('border-left-color');
$('#menu ul li a').css({ 'background': sBG, 'border': '1px solid', 'border-color': sBO });
$('#menu ul li a:not:(:first-child)').css('border-top', '0');
$('#menu > li').hover(function () { var pos = $(this).position(); $(this).children('ul').css({ 'left': pos.left + 'px', 'top': pos.top + 'px' }); }); }); //]]> </script> Edit the HTML as you please.
|
|
|
| |
|
welshtony
|
Jun 2 2013, 07:13 PM
Post #6
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
Hey Cory.
Works good on default theme but I would like it to work on all themes. Testing on my test board and below the board literally puts it below the board. I tried to move it to above the board and that put it below my announcement box. Wouldnt be so bad but the original submenu box is still there in a horible colour and you cant see the text of the links either 
http://w11.zetaboards.com/F6OC_Test_Board/index/
Thats my test forum
I have only added home and search atm. will add the others in a second
edit: ok added all links. when I hover over home all I can see is search and portal and as soon as I move the mouse down it just disappears
- Code:
-
<ul id="menu"> <li><a href="http://w11.zetaboards.com/F6OC_Test_Board/index/">home</a> <ul> <li><a href="http://w11.zetaboards.com/F6OC_Test_Board/search/">search</a> <ul> <li><a href="http://w11.zetaboards.com/F6OC_Test_Board/members/">Member List</a></li> <li><a href="http://w11.zetaboards.com/F6OC_Test_Board/calendar/">Calendar</a></li> <li><a href="http://w11.zetaboards.com/F6OC_Test_Board/faq/">FAQ</a></li> </ul> </li> <li><a href="http://w11.zetaboards.com/F6OC_Test_Board/site/">Portal</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a></li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> </ul> </li> </ul>
<script type="text/javascript"> //<![CDATA[ $(function () { $('#submenu a').hide(); $('#menu').prependTo('#submenu'); $('#menu ul ul').parent('li').addClass('sub'); var sBG = $('ul.drop_menu ul li a').css('background-color'); var sBO = $('ul.drop_menu ul li a').css('border-left-color');
$('#menu ul li a').css({ 'background': sBG, 'border': '1px solid', 'border-color': sBO });
$('#menu ul li a:not:(:first-child)').css('border-top', '0');
$('#menu > li').hover(function () { var pos = $(this).position(); $(this).children('ul').css({ 'left': pos.left + 'px', 'top': pos.top + 'px' }); }); }); //]]> </script>
I know I can tidy that up and left it as you had it really but I am only on my test board and wanted to do a quick test
|
|
|
| |
|
Cory
|
Jun 2 2013, 08:17 PM
Post #7
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Making it compatible for all submenu styles could take a lot of work in the end. Would you just like to use the original style I showed you?
|
|
|
| |
|
welshtony
|
Jun 2 2013, 08:27 PM
Post #8
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
Thats a shame. Maybe I could add 1 custom style at a later date that may work on all themes? Use the 1 style for all themes?
|
|
|
| |
|
Cory
|
Jun 2 2013, 08:53 PM
Post #9
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Yes, you can use a custom style that will be the same for all themes.
|
|
|
| |
|
welshtony
|
Jun 2 2013, 09:14 PM
Post #10
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
That I will have to do. Just no idea how to make a custom style though. Might put a request in once I know what I need lol
|
|
|
| |
|
Cory
|
Jun 3 2013, 07:31 AM
Post #11
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Well, the current JavaScript grabs some styles from the drop menus attached to the theme by default and gives those styles to the custom drop menus. I could make it grab any styles from your theme and give those styles to the menu so it will always be styled with the theme. If you wanted to take the route of styling the menu the same for every theme then the JavaScript needs to be modified a little bit and you can use your own custom backgrounds and text colors.
|
|
|
| |
|
welshtony
|
Jun 3 2013, 08:44 AM
Post #12
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
O actually having it use the themes styles would be perfect but at the moment it doesn't want to work properly like I said.
How do we get it to look like a sub menu on all themes?
|
|
|
| |
|
Cory
|
Jun 3 2013, 09:54 AM
Post #13
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
http://s1.zetaboards.com/Cory/index/
Do you like that? You can switch between the themes to see how the styles change.
|
|
|
| |
|
welshtony
|
Jun 3 2013, 04:22 PM
Post #14
|
- Posts:
- 359
- Group:
- Members
- Member
- #182,372
- Joined:
- April 20, 2009
- My Board URL
- http://s15.zetaboards.com/FordNationals/index/
|
Yeah that looks pretty good mate
|
|
|
| |
|
Cory
|
Jun 3 2013, 05:55 PM
Post #15
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Javascripts:- Code:
-
<style type="text/css"> #submenu, #none { display: none; }
#menu { padding: 0; font-size: 0; text-align: center; margin: 10px 0; }
#menu li { display: inline-block; padding: 0; margin: 0; font-size: 14px; }
#menu li a { display: inline-block; width: 100px; height: 25px; line-height: 25px; text-align: center; }
#menu > li > a { margin-bottom: -1px; }
#menu ul { display: none; position: absolute; left: 1px; margin-top: 27px; margin-left: -40px; }
#menu li:hover > ul { display: inline; }
#menu ul li, #menu ul a { display: block; }
#menu ul > li > ul { margin-left: 100px; margin-top: -27px; }
#menu ul > li:first-child > ul { margin-top: -26px; }
#menu li > ul > li > a { position: relative; z-index: 1; } </style> Above the Board:- Code: HTML
-
<ul class="drop_menu" id="none"><li><a href="#">#</a><ul><li><a href="#">#</a></li></ul></li></ul>
<ul id="menu"> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a> <ul> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> <li><a href="">Sub-Sub-Link</a></li> </ul> </li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> </ul> </li> <li><a href="">Link</a></li> <li><a href="">Link</a> <ul> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> <li><a href="">Sub-Link</a></li> </ul> </li> </ul> Below the Board:- Code:
-
<script type="text/javascript"> //<![CDATA[ $(function () { var sCO = $('ul.drop_menu ul li a').css('color'); var sBG = $('ul.drop_menu ul li a').css('background-color'); var sBO = $('ul.drop_menu ul li a').css('border-left-color');
$('#menu a').css({ 'color': sCO, 'background': sBG, 'border': '1px solid', 'border-color': sBO });
$('#menu ul li a').css('border-top-width', '0'); $('#menu ul ul li:first-child:not(:eq(0)) a').css('border-top-width', '1px'); $('#menu > li > a:not(:eq(0))').css('border-left', '0'); $('#menu ul ul').parent('li').addClass('sub');
$('#menu > li').hover(function () { var pos = $(this).position(); $(this).children('ul').css({ 'left': pos.left + 'px', 'top': pos.top + 'px' }); }); }); //]]> </script>
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|