how to: editable QuickLinks drop-down
The QuickLinks drop-down menu, found on the WVU homepage and other sites, is a feature which is experiencing growing demand throughout the university. This CSS/JavaScript menu can be added to a theme using shared files and a small bit of code insertion, and can be made an editable region so the users can choose what list items to include. Read on to find out how.
Implementation:
The following lines should be copied and pasted into the head of your .rhtml file to link the style sheet and the JavaScript necessary for this feature:
<head>
<%= stylesheet ’../shared/stylesheets/quicklinks.css’ %>
<script src="<%= theme_path %>/../shared/javascripts/jquery.js" type="text/javascript"> </script>
<script src="<%= theme_path %>/../shared/javascripts/quicklinks.js" type="text/javascript"> </script>
</head>
The following code should be copied and pasted into the div of your choice in the body of your document:
<body>
<div id="header">
<div id="actions">
<div id="quicklinks">
<span>Quick Links…</span>
<%= content_for(:quicklinks) %>
</div><!–– quicklinks ––>
</div><!–– actions ––>
</div>
</body>
You will want to ensure that your users have the UL tags, LI tags, and CLASSES in place for the menu to work properly. You can format the links using the Slate link tool, or traditional anchor tags, but the items must have list item tags. Should look something like this (click here for front end user instructions):
The look of this feature can of course be customized by adding styles to your sites style sheet; colors, fonts, size, etc. (making changes to the menu is only recommended for advanced CSS/HTML users)
