Suckless Horizontal Menu
The horizontal menu by Suckless is decent, but here’s an alternative approach based on the default werc menu. We define a handler for the subheader, a <div>
that is normally empty, that prints a vertical menu, with each menu having the CSS class headerMenu
appended by a number of underscores equal to the nesting depth (so you have headerMenu
, headerMenu_
, headerMenu__
, etc). This allows styling of each level. Just put the following in your _werc/config
or etc/initrc.local
.
handler_subheader='nav_header'
fn nav_header {
level=''
for (d in $req_paths_list) {
echo '<ul class="headerMenu'$level'">'
level=$level^_
ls -F $sitedir/./$d >[2]/dev/null \
| {
sed $dirfilter'/\/[^_.\/][^\/]*(\.(md|txt|html)|\/)$/!d; s!^'$sitedir'!!; '$dirclean
if(! ~ $#synth_paths 0) echo $synth_paths | tr ' ' $NEW_LINE
} | sort -u | awk -F/ '
{
d = ""
if(match($0, "/$"))
d = "/"
sub("/$", "") # Strip trailing / for dirs so NF is consistent
bname = $NF d
path = $0 d
gsub(/[\-_]/, " ", bname)
# To avoid false matches add trailing / even for plain files to act as delimiter
pa = path
gsub(/[^\/]$/, "&/", pa)
if(index(ENVIRON["req_path"] "/", pa) == 1)
print "<li><a href=\"" path "\" class=\"thisPage\">" bname "</a></li>"
else
print "<li><a href=\"" path "\">" bname "</a></li>"
}
END { print "</ul>" }'
}
}
Note that this alone does not remove the default menu. To accomplish this, remove the sidebar handler:
handlers_bar_left=()
Also, in order for the menu to actually be horizontal, you’ll need a bit of CSS:
.subHeader ul {
margin: 0;
}
.subHeader li {
display: inline;
list-style-type: none;
border-right: 1px solid #aaa;
margin: 0;
padding: 0;
}
.subHeader a {
color: #113;
padding: 5px;
}
.subHeader a:hover, .thisPage {
background-color: #eee;
}
.headerMenu {
background-color: #999;
}
.headerMenu_ {
background-color: #aaa;
}
.headerMenu__ {
background-color: #bbb;
}
To post a comment you need to login first.