Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 UTC on 18 March 2024, to get $100 off your ticket.
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