Quicklinks V2 for West Virginia University

quicklinks.rhtml

<ul id="quicklinks">
	<li>
		<a href="#not-an-id">Quick Links</a>
			<%= content_for(:quicklinks) %>
	</li>
</ul>

<!-- load jquery and the quicklinks.min.js, put these just before your closing body tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/themes/shared/javascripts/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="/themes/shared/javascripts/quicklinks_v2.min.js"></script>

quicklinks_editable_region_code.html

<!-- Put this markup in the Quicklinks editable region -->
<notextile>
<ul>
	<li><a href="#link_url">Link One Text</a></li>
	<li><a href="#link_url">Link Two Text</a></li>
	<li><a href="#link_url">Link Three Text</a></li>
	<li><a href="#link_url">Link Four Text</a></li>
</ul>
</notextile>

quicklinks_v2.css

/* Quicklinks v2 - From http://examples.furtherahead.com/css-menu/option-4.html */
#quicklinks li { font-size: 10px; }
#quicklinks, #quicklinks ul { margin: 0; padding: 0; list-style: none; }

/* Top level nav */
#quicklinks { float: left; margin: 20px 0; /* top bottom outer margin */ background: url(http://slate.wvu.edu/themes/shared/images/downarrow.png) no-repeat #fff right 6px;	border: 1px solid #cedeef; }

/* Dropdowns */
#quicklinks ul { position: absolute; z-index: 5000; top: 2.45em; /* this is how far from the top hover menu should be displayed. Edit in conjunction with font-size of #quicklinks ul a. */
	left: -9999em; opacity: 0; -webkit-transition: opacity 0.1s linear;  /* Saf3.2+, Chrome */ -moz-transition: opacity 0.1s linear;  /* FF4+ */ -ms-transition: opacity 0.1s linear;  /* IE10? */ -o-transition: opacity 0.1s linear;  /* Opera 10.5+ */ transition: opacity 0.1s linear;	min-width: 150px; background-color: #fff; border: 1px solid #cedeef; border-top: 0; }
#quicklinks li { float: left; position: relative; }

/* Top level nav items */
#quicklinks li > a { float: left; padding: 5px; width: 200px; color: #333; font-size: 12px; text-decoration: none; }

/* Top level hover state, preserve hover state when hovering dropdown  */
#quicklinks li > a:hover, #quicklinks li > a:focus, #quicklinks li:focus > a, #quicklinks li:hover > a { outline: 0; color: #666; }
#quicklinks li:hover ul, #quicklinks li:focus ul, #quicklinks ul.show-menu { left: 0; opacity: 0.99; color: #333; }
#quicklinks ul li {	float: none; position: static; }
#quicklinks ul a { float: none;	display: block;	color: #333; font-size: 12px; border: 1px solid #fff; border-right: 2px solid #fff; border-top: 0; width: 197px; -webkit-transition: all 0.1s linear;  /* Saf3.2+, Chrome */ -moz-transition: all 0.1s linear;  /* FF4+ */ -ms-transition: all 0.1s linear;  /* IE10? */ -o-transition: all 0.1s linear;  /* Opera 10.5+ */ transition: all 0.1s linear; }
#quicklinks ul a:hover, #quicklinks ul a:focus { background: #cedeef; color: #333; }
#quicklinks div.version-nav a { background-color: transparent; display: inline; }
#quicklinks .area-text { position: relative; top: -20px; }