Menu:

The main menu plugin...

    table of contents

  1. ↓ usage
  2. ↓ split menu
  3. ↓ CSS anchors
  4. ↓ example

The main menu is a plugin that build a nested tree navigation menu.

↑ usage  #

The normal tag you should use:

HTML
1
{% lucidTag main_menu %}

↑ split menu  #

You can split the menu with the optional min and max arguments:

HTML
1
{% lucidTag main_menu min=XXX max=XXX %}

  • min - The starting level (first level is 1)
  • max - The end level (without end, use 0)

Here on pylucid.org homepage you see the main menu on the top, with:

HTML
1
{% lucidTag main_menu min=1 max=1 %}

...and the menu on the right, with:
HTML
1
{% lucidTag main_menu min=2 max=0 %}

(without any tag arguments you see the complete menu tree)

↑ CSS anchors  #

Every menu item has some CSS anchor you can use:

.current Current page link.
.active Link in the path back to the root.
.first First link in the level.
.last Last link in the same level
.level_X the level deep number (starts with 0)

↑ example  #

Here is a example how you can use the CSS information:

CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.main_menu *, .main_menu a.current {
  font-size:1em;
  font-family:monospace;
  font-weight: normal;
  text-decoration:none;
  list-style-type:none;
  padding: 0px;
  margin: 0px;
}
.main_menu a.current {
    color: blue;
}
.main_menu a:before { content:"\0251C  "; }
.main_menu a.level_1:before { content:"\2502 \0251C  "; }
.main_menu a.level_2:before { content:"\2502 \2502 \0251C  "; }

.main_menu a.first:before { content:"\250c  "; }
.main_menu a.level_1.first:before { content:"\2502 \250c  "; }
.main_menu a.level_2.first:before { content:"\2502 \2502 \250c  "; }

.main_menu a.last:before { content:"\2514  "; }
.main_menu a.level_1.last:before { content:"\2502 \2514  "; }
.main_menu a.level_2.last:before { content:"\2502 \2502 \2514  "; }

note: CSS content doesn't work in any IE version!

tag navi documentation | features | help
Fork me on GitHub