3 replies to this topic

[Cris D.]

File Name: EtoTabs
File Submitter: Cris D.
File Submitted: 25 Aug 2007
File Updated: 5 Oct 2008
File Category: Etomite Templates

This is a selection of 11 different styles of tab-styled menus to place in your template.

The zip package includes:
1) etotab template to show off all 11 menus and you can see how they are used in a template making it easy for you to add it to your own (or just delete the ones you don't want).
2) TabMenu snippet to create the menu from your existing installation.
3) etotabs.css file with styling for all 11 menus, link the whole css file or just copy and paste the style you want for your template.
4) gif files for the left and right edge of each tab in all 11 styles.
5) a html file to view all the tabs when you unzip the package, this will let you try the one you want before uploading the entire lot if you wish.
6) A readme file that explains all this and more detail of how to install the sippet, css and template.

See the sample page and source where it was collected from here.

Click here to download this file

Edited by Cris D., 04 October 2008 - 10:16 PM.

[katherholt]

I love this! I'm using version E here:
http://www.belles-rebels.com/home.html
Great job Cris!

How do you make the tabs to have a highlighted state (you are here button)?

Karen

Edited by katherholt, 27 September 2007 - 07:44 PM.

[Cris D.]

Hi Karen,

Glad you like it.

The snippet is based on the MenuHori snippet which only checks for the parents to show. To make the current page highlighted...

1) Additional code would have to be added to the snippet that checks if the current page is the one being created by the snippet and insert a CSS tag to style it without being moused over.

Something like

if ($children[$x]['id'] == $etomite->documentIdentifier) {$menu.="[b]<li id=\"current\">[/b]";
} else{
$menu.="[b]<li>[/b]";}

delete the existing <li> so it will be dynamically generated like this:

$menu.="<a href='[~".$children[$x]['id']."~]'><span>".$children[$x]['pagetitle']."</span></a></li>\n";

Hope this makes sense

2) You would have to add the created #id to the tab CSS code that styles the tab to the hover colour.

#tabsE a:hover span, [b]#current [/b]{
	  color:#FFF;
	  }
	#tabsE a:hover, [b]#current[/b] {
	  background-position:0% -42px;
	  }
	#tabsE a:hover span, [b]#current[/b]  {
	  background-position:100% -42px;
	  }

Basically it can be done but will take some tinkering. I have also been working at integrating the ListMenu snippet to use with these tabs as an option because it provides many more configurable parameters but as usual it's just time...

Now I have lots of time, I'm on holidays again and won't be near the internet for a week. Have a play and let me know how you go.

[darren]

in case someone else needs this... adds the 'active/you are here' id:

//  --------------------------------------------
//  Etotabs by Cris D.
//  Based on the Snippet:  MenuHori by summean
//  --------------------------------------------
//  Based on the MenuBuilder snippet, however 
//  MenuHori does not show subchildren.  Inserts
//  into a template just like MenuBuilder:
//  [[MenuHori?id=__]] where __ is the folder 
//  containing the links/documents.

$children = $etomite->getActiveChildren($id); $menu = "<ul>"; $childrenCount = count($children);
if($children==false) {
    return false;
}

for($x=0; $x<$childrenCount; $x++) {

if ($children[$x]['id'] == $etomite->documentIdentifier) {
    $menu.="<li id=\"current\">";}
else {
$menu.="<li>";}

$menu .= "<a href='[~".$children[$x]['id']."~]'><span>".$children[$x]['pagetitle']."</span></a></li>\n";
    
    }

$menu .="</ul>\n";

return $menu;

and this styles it (matches hover state as is, tabsB used as example)

#tabsB #current a span{background-position:100% -42px; color:#666; }
#tabsB #current a {background-position:0% -42px;}