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.