Developers System Navigation Utility
This is an open discussion with 8 replies, filed under General.
Search
I also developed some CSS to display horizontal menus with options for horizontal or vertical submenus:
/* navigation ----------------------------------------------- */ #system-navigation { display:block; width:100%; min-width:775px; height:4.5em; font-size:1.2em; background:#e3e0d1; } #navigation { display:block; width:100%; min-width:775px; font-size:1.2em; } /* menu (horizontal submenus) ----------------------------------------------- */ ul.menu, ul.menu * { margin:0;padding:0;} ul.menu { position:relative; background:#36c; max-width:100%; height:2.5em; } ul.menu li { cursor:pointer; float:left; text-align:center; list-style-type:none; font-weight:normal; } ul.menu li ul { cursor:default; width:100%; max-width:100%; position:absolute; height:auto; top:2.5em; background-position:0 0 !important; left:-9000px; } ul.menu li ul li { padding:0; border:none; width:auto; max-width:none; } ul.menu li a { color:#fff; background:#36c; font-weight:bold; text-decoration:none; display:block; float:left; padding:0 1em; height:2.5em; line-height:2.5em; } ul.menu li ul li a { position:relative !important; /* ie Mac */ cursor:pointer !important; white-space:nowrap; line-height:2em; height:2em; font-weight:normal; color:#666; background-position:0 50% !important; } ul.menu li:hover a, ul.menu li a:hover, ul.menu li a:focus {color:#000; background:#e3e0d1;} ul.menu li a:active {color:#36c; background:#fff;} ul.menu li:hover ul {left:0;z-index:10} ul.menu li ul, ul.menu li {background:#e3e0d1 !important} ul.menu li:hover ul li a {color:#4a442a;} ul.menu li:hover ul li a:hover {color:#000; background:#fff;} ul.menu li:hover ul li a:active {color:#36c; background:#fff;} ul.menu li.current a {color:#36c; background:#fff; cursor:default; font-weight:bold;} ul.menu li.current ul {left:0;z-index:5} ul.menu li.current ul, ul.menu li.current {background:#e3e0d1 !important} ul.menu li.current ul li a {color:#4a442a; background:#e3e0d1; font-weight:normal;} ul.menu li.current ul li a:hover {color:#000; background:#fff;} ul.menu li ul li.current a, ul.menu li ul li.current a:hover, ul.menu li.current:hover ul li a:active {color:#36c; background:#fff;}
For vertical submenus, rather than the horizontal submenus in the above code, add the following to your CSS:
/* menu (vertical submenus) ----------------------------------------------- */ ul.menu { background:#36c; } ul.main-menu li { position:relative; top:0; left:0; } ul.main-menu li ul { border-top:0; } ul.main-menu li ul li { float:left; } ul.main-menu li a { height:2.5em; line-height:2.5em; border:0; color:#fff; background:#36c; } ul.main-menu li ul li a { width:12em; line-height:2em; height:2em; text-align:left; color:#fff; border-top:1px solid #036; background:#036; } ul.main-menu li a:focus {color:#fff; background:#36c;} ul.main-menu li ul li a:hover { color:#fff; background:#149; } ul.main-menu li:hover a { color:#fff; background:#149; } ul.main-menu li:hover ul li a {color:#fff;} ul.main-menu li:hover ul li a:hover {color:#fff; background:#036;} ul.main-menu li:hover a:active {background:#036;} ul.main-menu li:hover ul li a:active {color:#fff; background:#024;} #system-navigation { height:2.5em; background:#36c; } /* comment this rule for horizontal navigation */
In your master template, add an import instruction for the utility:
<xsl:import href="../utilities/system-navigation.xsl"/>
Insert this set of variables before the xsl:template
element:
<xsl:variable name="is-logged-in" select="/data/events/login-info/@logged-in"/> <xsl:variable name="name" select="/data/events/login-info/name"/> <xsl:variable name="username" select="/data/events/login-info/username"/> <xsl:variable name="user-type" select="/data/events/login-info/@user-type"/> <xsl:variable name="user-id" select="/data/events/login-info/@id"/>
Call the template at the top of your page:
<xsl:call-template name="system-navigation"/>
If you don't want the login link to show up when not logged in, remove the xsl:otherwise
instruction from the template.
For vertical menus, you'll need both classes for the parent ul
element:
<ul class="menu main-menu">
Screen shots of the horizontal and vertical submenus.
Just had another thought. Why not add the links to the community sites:
<li><a href="{$root}/symphony/">Community</a> <ul> <li><a href="http://www.overture21.com/forum/">Overture Forum</a></li> <li><a href="http://beta.overture21.com/forum/">Overture Beta Forum</a></li> <li><a href="http://accounts.symphony21.com/">Symphony Accounts</a></li> <li><a href="http://bugs.21degrees.com.au/">Beta Bug Tracker</a></li> <li><a href="http://sneakpeek.symphony21.com/">Sneak Peak Gallery</a></li> </ul> </li>
I've updated the code above.
Very useful. Thanks for sharing.
You're welcome. Glad you find it useful.
Very nice :-) Thanks for the contribution.
Create an account or sign in to comment.
The first thing I wanted to try out was the clean URLs for the Symphony admin. This was great for building a developers system navigation bar that appears only when logged in. Here's my first utility for Symphony 2:
Save the utility as
system-navigation.xsl
.