Add-on: Custom Navigation

[kbeeveer46]

This isn't really a mod, but I'd like to share the new navigation I am using for my mollio-beat template (horizontal navigation at the top). you can see it in action here: www.indianaseesee.com

Cascading Style Sheet:

#tabsE {
      float:left;
      width:50%;
      font-size:93%;
      line-height:normal;
	  margin-top:-14px;
      }
	  
    #tabsE ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
      }
    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsE a {
      float:left;
      background:url(../images/tableftE.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsE a span {
      float:left;
      display:block;
      background:url(../images/tabrightE.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      }

Header.tpl

<div id="tabsE">
  <ul>
    <li class="first"><a href="{$my_base_url}{$my_pligg_base}"><span>Home</span></a></li>
    {if $user_authenticated eq true}
    <li><a href="{$URL_userNoVar}"><span>{$user_logged_in} {#PLIGG_Visual_Profile#}</span></a></li>
    {if $isadmin eq 1}
    <li><a href="{$URL_admin}"><span>{#PLIGG_Visual_Header_AdminPanel#}</span></a></li>
    {/if}
    <li><a href="{$URL_logout}"><span>{#PLIGG_Visual_Logout#}</span></a></li>
    {else}
    <li><a href="{$URL_login}"><span>{#PLIGG_Visual_Login#}</span></a></li>
    {/if}
  </ul>
</div>
<br />

Two images:



You will need to put the images in the mollio-beat images folder