Can a spry menu bar have an AddThis widget?
Budo Cat Oct 13, 2010 2:51 PMI'm trying to include an AddThis widget to my spry horizontal menu, but with only marginal success. By fussing with the margins, page width and width of menu items, I was finally able to center the menu shwon below. But once I included the AddThis widget (between the "index" and "next page"), the menu broke: It's no longer centered, and "next page" falls on a second line. I've been fussing with it all day and I cannot get it to work.
I'm not online yet, so I can't provide a URL. But some of my coding is below (widget coding is at the bottom):
CSS
ul.MenuBarHorizontal
{
list-style-type: none;
font-size: 14pt;
cursor: default;
width: 760px;
font-family: "Times New Roman", Times, serif;
background-color: #FFF;
padding: 0;
margin: 0 auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: auto;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
HTML:
<div id="navBar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">‹ ‹ Previous page</a> </li>
<li><a href="#">home</a> </li>
<li><a href="#">about</a></li>
<!-- TemplateBeginEditable name="menuPage" -->
<li><a href="../Pages/menu_1.html">menu</a></li>
<!-- TemplateEndEditable -->
<li><a href="#">contact</a></li>
<li><a class="MenuBarItemSubmenu" href="#">index</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">first category</a>
<ul>
<li><a href="../Pages/first essay.html" </a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">second category</a>
<ul>
<li><a href="../Pages/second essay.html" </a></li>
<li><a href="../Pages/third essay.html" </a></li>
</ul>
</li>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=budocat" class="addthis_button_compact" addthis:url="http://example.com">Share</a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=budocat"></script>
<!-- AddThis Button END -->
<li><a href="#">Next page › ›</a> </li>
</ul>
</div><!--close navBar-->

