How to implement a CSS-Navgation ?


This implementation is derived from simple template created by Michael Klier.
The following illustrates the “look & feel” (realized by a syntax plugin [ more to that plugin here ... ])

inline Example:


Step 1 - php function

add following php-syntax into the tpl_functions.php of your template:

/**
 * Renders the topbar
 * @author Michael Klier <chi@chimeric.de>
 */
function tpl_topbar() {
    global $ID;
 
    $found = false;
    $tbar  = '';
    $path  = explode(':', $ID);
 
    while(!$found && count($path) >= 0) {
        $tbar = implode(':', $path) . ':' . 'topbar';
        $found = @file_exists(wikiFN($tbar));
        array_pop($path);
        // check if nothing was found
        if(!$found && $tbar == ':topbar') return;
    }
 
    if($found && auth_quickaclcheck($tbar) >= AUTH_READ) {
        print p_wiki_xhtml($tbar,'',false);
    }
}

Step 2 - main.php modification

The following code has to be inserted into the main.php of your template at the right div section. Some templates need that multiple times like Arctic template depending on the tpl_getConf('sidebar') sections starting around line 140 ).

In that case search for

<?php ($notoc) ? tpl_content(false) : tpl_content() ?>

and insert before each of such line the following code

<div id="tpl_simple_navi">
  <?php tpl_topbar() ?>
</div>

to get this navbar ontop of the page content.

Step 3 - template css extension

Now add to the template css file following style definitions (e.g. arctic.css). The file csshover3.htc can be downloaded here ... or you take it out of the simple template package. This file is to be stored to the root of your template directory (e.g. /lib/tpl/arctic/ )

/* ---------- Top Navigation ----------- */
* html body {
  behavior: url("csshover3.htc"); /* fix csshover behavior for IE6 */
}
 
div.dokuwiki div#tpl_simple_navi {
  border: 1px solid __border__;
  background-color: __navi_background__;
  margin-left: auto;
  height: 1.8em;
  margin: 0.2em 0 0.5em 0;
  border-radius: 0.3em;
}
 
*+ html div.dokuwiki div#tpl_simple_navi {
  height: 2.2em;
}
 
div.dokuwiki div#tpl_simple_navi ul {
  background-color: __navi_background__;
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
}
 
div.dokuwiki div#tpl_simple_navi ul li {
  float: left;
  margin: 0;
  margin-right: 0em;
  width: __navi_link_width__;
  height: 1.8em;
}
 
div.dokuwiki div#tpl_simple_navi a {
  display: block;
  text-decoration: none;
  border-bottom: none;
  padding: 0em;
  padding-left: 0.8em;
  margin: 0;
  height: 1.8em;
}
 
div.dokuwiki div#tpl_simple_navi a.wikilink2 {
  border-bottom: none !important;
}
 
div.dokuwiki div#tpl_simple_navi a.urlextern,
div.dokuwiki div#tpl_simple_navi a.interwiki {
  padding: 0;
  padding: 0.4em;
  padding-left: 0.8em;
  background-image: none;
}
 
div.dokuwiki div#tpl_simple_navi li:hover {
  background-color: __navi_background_alt__;
}
 
div.dokuwiki div#tpl_simple_navi a:hover {
  background-color: __navi_background_alt__;
  text-decoration: underline;
}
 
div.dokuwiki div#tpl_simple_navi li {
  margin: 0;
  padding-left: 0.3em;
  position: relative;
}
 
div.dokuwiki div#tpl_simple_navi ul ul {
  border: 1px solid __border__;
  position: absolute;
  border-radius: 0.3em;
  z-index: 500;
}
 
div.dokuwiki div#tpl_simple_navi ul ul ul {
  top: -0.5em;
  left: 100%;
  border: 1px solid __border__;
  margin-top: 5px;
  border-radius: 0.3em;
}
 
div.dokuwiki div#tpl_simple_navi ul ul,
div.dokuwiki div#tpl_simple_navi ul li:hover ul ul,
div.dokuwiki div#tpl_simple_navi ul ul li:hover ul ul {
  display: none;
}
 
div.dokuwiki div#tpl_simple_navi ul li:hover ul,
div.dokuwiki div#tpl_simple_navi ul ul li:hover ul,
div.dokuwiki div#tpl_simple_navi ul ul ul li:hover ul {
  display: block;
}
 
div.dokuwiki .navi_clearer {
  clear: both;
  margin-bottom: 1.8em;
}

Step 4 - style.ini extension

The generic settings are done within the style.ini of your template according the following lines:

; simple_topmenu
__navi_link_width__     = "200px"
__navi_background_alt__ = "#aaaaed" ; a light blue
__navi_background__     = "#eeeeee" ; light grey

Step 5 - Define Menue Items

Finally you have to create the link list of your navigation. Therfore store a text file to the pages-root folder of your DokuWiki. The menu items are unordered list items followed by the internal dokuwiki link (all as DW-syntax). There it is necessary to enter an empty line between the level one to tell the php-code that a new menu tab item to be created. For the fcon page this would look similar to following:

topbar.txt
  * [[:start|Home]]
 
  * Plugins
    * Issue Tracker
      * [[issuetracker:descr|Description]]
      * [[issuetracker:report|Report an Issue]]
      * [[issuetracker:issuelist|Issue List]]
    * Training  
      * [[training:start|Overview]]
      * [[training:authors|Author Training]]
      * [[training:admins|Admin Training]] 
    * NEWS System  
      * [[news:how_to_set-up|Description]]
      * [[news:news|News]]
      * [[news:writenews|Write News]]
tips/tips_topbar.txt · Last modified: 2014/04/30 09:36 (external edit)

This Wiki is hosted and ruled by Policies of Frister Consultancy Services.
By using this wiki you accept these rules. -> Impressum