We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 3
[ C ] Submenu Drop Down Box
Topic Started: Jun 1 2013, 07:29 PM (1,443 Views)
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
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
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

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.
Edited by DaPizzaMan, Jun 1 2013, 11:11 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Here's an alternative version you may be interested in: http://s1.zetaboards.com/Cory/index/
Offline Profile Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
Nice code DaPizzaMan but isnt what I want sorry.

O now Cory that looks like something that I would like :D
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Admin CP Posted Image Themes Posted Image Board Template Posted Image 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 Posted Image Themes Posted Image Board Template Posted Image 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.
Offline Profile Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
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
Edited by welshtony, Jun 2 2013, 07:19 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
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?
Offline Profile Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
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?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Yes, you can use a custom style that will be the same for all themes.
Offline Profile Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
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
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
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.
Offline Profile Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
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?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
http://s1.zetaboards.com/Cory/index/

Do you like that? You can switch between the themes to see how the styles change.
Offline Profile Goto Top
 
welshtony
Member Avatar
www.f6oc.co.uk
[ *  *  * ]
Yeah that looks pretty good mate
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
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>
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 3