-
1. Re: Can spry menu have editable regions?
Zabeth69-YATPtk Oct 12, 2010 3:16 PM (in response to Budo Cat)Hmm.
I've never considered making portions of a Spry menubar editable, but you can do it. You just have to make sure you don't delete or overlap necessary code, and I think submenus will be problematic.
When you want to make a menu item editable, do it in code view and select the entire contents of the list item:
<li><a href="#">Item 1.1</a></li>
That way, you will be able to change the link and the Item text..
If Dreamweaver warns you that you are working in a block item, don't worry about it. You know that, and it won't hurt anything in this case.
There will be other ways to construct local versions of the menu. If you need submenus, you need to remember to add certain Class designations, which you can certainly do if you are careful. I personally would opt for several different menus controlled from the stylesheet. It would be a little more complicated, but then you don't have to remember to go into every page to fix up the menu. I don't know your project, so I couldn't say whether that would be a big waste of time or useful. If you were going to use the same menu on several pages, it might be useful. If every single page is different anyway, do it your way!
additionally:
I made a menu item editable and this is what the code looks like: Each editable area will have its own name.
<li><!-- TemplateBeginEditable name="menuitem2" --><a href="#">Item 2</a><!-- TemplateEndEditable --></li>
Beth
Message was edited by: Zabeth69
-
2. Re: Can spry menu have editable regions?
Budo Cat Oct 13, 2010 2:25 PM (in response to Zabeth69-YATPtk)Thank you, Beth! That seems to have worked.
I was wondering if you knew whether I can add an AddThis widget to a spry menu, as well? By fussing with the margins, page width and width of menu items, I was finally able to center the menu. But once I included the AddThis widget (between the "index" and "next page" seen on my original photo), the menu broke into two lines (between the widget and "next page"). I've been fussing with it all day and I cannot get it to work.
I'm not online yet, so I can't direct you to 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-->
-
3. Re: Can spry menu have editable regions?
Zabeth69-YATPtk Oct 13, 2010 3:04 PM (in response to Budo Cat)Budo Cat: The usual reason for a Menubar breaking is that it's too wide for the space allotted.
You can cheat it in by reducing left- and right-paddings inside the menu items, or making other adjustments.
But, ah! I see that you have inserted your "add this widget" code BETWEEN list items. That will only bite you on the ankle. Make sure it is within its own list item tags, and you will regain control of the situation.
<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>
Assuming it will fit in your width generally, you should be fine if you do this.
Beth
-
4. Re: Can spry menu have editable regions?
Budo Cat Oct 13, 2010 11:50 PM (in response to Zabeth69-YATPtk)Thank you, thank you, thank you! This explains the sore ankle, aching back and migrane.
Two more questions, if you don't mind. First, the new widget icon and "share" are not centered horizontally with the rest of the items (eg, "home," "about," "contact," etc.) Rather, it's floating a little higher than the rest, very close to the top of the black navBar region. Is there a way I can bring that single item down and put it in line with the others?
Also, this new widget has noticeably slowed the load time of the page. The header and first half of the navBar load as quickly as before, but before the rest of the page can load there's an uncomfortable pause where the new widget is. Can I somehow make the download proceed without the widget, and let the widget catch up when it's ready to join the rest of the page?
New coding is below, if needed. And thank you again for your help.
<div id="navBar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">‹ ‹ Previous </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 story.html" title="</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">second category</a>
<ul>
<li><a href="../Pages/second story_1.html" title=";</a></li>
<</a></li>
</ul>
</li>(more stories/categories here)
</ul>
</li>
</ul>
</li>
<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>
<li><a href="#"> Next › ›</a> </li>
</ul>CSS
ul.MenuBarHorizontal
{
list-style-type: none;
font-size: 14pt;
cursor: default;
width: 770px;
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: 1px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: auto;
float: left;
} -
5. Re: Can spry menu have editable regions?
Zabeth69-YATPtk Oct 14, 2010 4:36 AM (in response to Budo Cat)Hi!
Put these two lines in the head of the document (move them from where they are now):
<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>Be careful that you don't overlap tags in the head.
I think you want these lines to process before the page loads, instead of in the middle of loading. My intuition says that will happen when you have moved them.
Beth

