Using jquery to group tabs
Last modified: August 23, 2009 - 15:17
I noticed that Tabs sometimes looks ugly, sometimes you need them, sometimes are just in the way between the node title and the body. This tutorial will teach you a way to group the Tabs with Jquery.
On page.tpl.php paste this:
<?php
if (arg(0) == 'node' && is_numeric(arg(1))) { // first, we check if it's a node
if($tabs) { ?> // then, we check if tabs are showing
<div id="actions_menu"> // we add a div to float the menu to the right, this is optional
<div class="menu_head">Actions</div> // this is the link that users will click to see the menu
<ul class="menu_body"> // this is the ul container
<?php print $tabs; ?>
</ul>
</div> // actions_menu ends
<div class="clear"></div> // if we're floating everyting to the right, we'll need this
<h1 class="title"><?php print $title ?></h1> // we print the node title after our menu
<?php } ?>
<?php } else { ?> // when it's not a node we want to show the traditional tabs
<h1 class="title"><?php print $title ?></h1> // first the title
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul>'; endif; ?> // then the tabs
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?> // if there's $tabs2 we print them
<?php } ?>Don't forget to remove the comments above.
Now the Script:
<script type="text/javascript">
$(document).ready(function () {$("ul.menu_body li:even").addClass("alt");
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('div.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});
});
</script>And finally the CSS:
#actions_menu {
float: right;
}
.menu_head {
background:#FFFFFF none repeat scroll 0 0;
border-color:#DCDCDC;
border-style:solid;
border-width:1px 1px 1px 10px;
color:#000000;
font-weight:bold;
margin:0.25em 0 0.5em 1px;
padding:0 0 0 5px;
width:104px;
}
.menu_body {
border-bottom:1px solid #DCDCDC;
border-left:1px solid #DCDCDC;
border-right:1px solid #DCDCDC;
width:119px;
margin: -0.5em 0 0 0;
display:none;
}
.menu_body li {
background:#FFFFFF none repeat scroll 0 0;
margin:0;
padding:0;
}
.menu_body li a {
border-left:10px solid #FF6600;
display:block;
font-weight:bold;
padding:0 0 0 5px;
text-decoration:none;
}
.menu_body li.alt {
background:#FFFFFF none repeat scroll 0 0;
margin:0;
padding:0;
}Now, when we're viewing a node, tabs will be inside the Actions Menu we've just created, this saves a lot of space to the user.
See the screenshots The last case is when you're not viewing a node.
This works for Drupal 6 but it shouldn't be a problem to adapt it to Drupal 5.x
hi thanks for this,but where
hi thanks for this,
but where do i put the script,
Ive tried in my page tpl and in script.js, ive just pasted the code in their, but nothing happens.
ive put the script inmy
ive put the script inmy page.tpl, and it works ok in garland, but when i try in my zen subthemes nothing happens, the actions text is there, but i cant click on it.
Any helps appreciated thanks
I wrote this code a long time
I wrote this code a long time ago and I'm not using it. I guess you could put it inside some .js file and then call drupal_add_js (see api.drupal.org). Honestly I never used zen and don't know enough about sub-theming so I can't help you with that. Sorry.
Luis