Project Seven SwapClass
Hello,
I completed and understand the project seven tutorial,
SwapClass:
http://projectseven.com/tutorials/navigation/swapclassmenu/index.htm
However, I'm trying to recreate the navigation menu for my
own site and have a few questions. First, the only defining
characteristics I can find in the code of their workpage.htm with
regards to the ".open" and ".closed" classes are that they either
"display block" in the open class, or "display none" in the closed
class. Am I missing some aspect of defining these classes? Second,
they have their navigation menu as an unordered list in an
absolutely placed div. Will it make a difference if I try to create
a working toggle menu like this with my menu options defined as an
unordered list within a table? I finally have got my layout
properly placed and would prefer not to work with layers and divs
if possible...
Thanks much for your input!
"keeptheoceanclean" <[email protected]>
wrote in message
news:fllsck$ns7$[email protected]..
> Hello,
>
> I completed and understand the project seven tutorial,
SwapClass:
>
http://projectseven.com/tutorials/navigation/swapclassmenu/index.htm
>
> However, I'm trying to recreate the navigation menu for
my own site and
> have a
> few questions. First, the only defining characteristics
I can find in the
> code
> of their workpage.htm with regards to the ".open" and
".closed" classes
> are
> that they either "display block" in the open class, or
"display none" in
> the
> closed class. Am I missing some aspect of defining these
classes? Second,
> they
> have their navigation menu as an unordered list in an
absolutely placed
> div.
> Will it make a difference if I try to create a working
toggle menu like
> this
> with my menu options defined as an unordered list within
a table? I
> finally
> have got my layout properly placed and would prefer not
to work with
> layers and
> divs if possible...
The open and closed classes are what the SwapClass script
toggles between.
No other properties are necessary for those classes. The menu
is styled by
using descendant selectors keyed off either the .open,
.closed, or both
classes, such as:
1) .closed a, .open a
2) .closed a:hover
3) .open a:hover
The menu can go inside any type of containing element,
including a table
cell.
You might want to post on our newsgroups. If you are not
familiar with
newsgroups, they work similarly to email and are much, much
faster than web
forums. You can find instructions here on how to set up a
news reader using
Windows Mail, Outlook Express, Entourage, or Thunderbird:
http://projectseven.com/support/index.htm
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
Similar Messages
-
Project Seven Horizontal Menu Bar
QUESTION
What must I do to get individual menu items to fill the width
of a document?
BACKGROUND
Recently I switched from a SRPY horizontal menu bar to a
Project Seven horizontal menu bar. After substantial manipulation
of this latter I have achieved all of my goals except for one --
individual menu items that expand to fill the width of the page.
For the moment everything is crowded to the left.
Unfortunately every tweek of which I can think to adjust the
menu bar results in disaster. Perhaps there is a combination of
tweeks that I must apply simultaneously that I simply do not know.
This is a really clean page that has been validated for both
HTML and CSS.
The WEBPAGE
http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Contents/utility/practice.html
Roddyhttp://www.maxdesign.com.au
has some nice ones....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Al Sparber - PVII" <[email protected]>
wrote in message
news:[email protected]...
> Hi Roddy,
>
> You'll need to lay out the page a bit differently so
that the menu bar is
> part of the main column. Since you are using Adobe CSS
it is problematic.
> You might want to check a few online CSS positioning
tutorials for some
> better approaches to doing a 2-column flexible layout.
>
> --
> Al Sparber - PVII
>
http://www.projectseven.com
> The Finest Dreamweaver Menus | Galleries | Widgets
>
http://www.projectseven.com/go/pop
> The Ultimate DW Menu System
>
>
>
>
> "kiusau" <[email protected]> wrote in
message
> news:[email protected]...
>>
quote:
Since your layout is flexible rather than fixed-width, the
only way to
>> get
>> those links to stretch so that they
>> fill the available would be to assign a percentage
width to each root
>>
>> element.
>>
>> The following adjustments fail:
>>
>>
CSS CODE
>>
>> #p7menubar li {
>> float: left;
>> width: 17%;
>> }
>> #p7menubar #previous li {
>> float: left;
>> width: 16%;
>> }
>> #p7menubar #next li {
>> float: left;
>> width: 16%;
>> }
>>
>>
HTML CODE
>>
>> <div id="menuwrapper">
>> <ul id="p7menubar">
>>
>> <li id="preview"><a
href="#">Previous</a></li>
>> <li id="view"><a href=""
>>
onclick="openFunctionalityWindow()">Viewing</a></li>
>>
>> <li id="copyright"><a class="trigger"
href="#">Copyright</a>
>>
>>
<a href="#">Author</a></li>
>>
<a href="#"
>>
onclick="openCitationWindow()">Citation</a></li>
>>
<a href="#">Plagiarism</a></li>
>>
<a href="#">Sources</a></li>
>>
>> </li>
>>
>> <li id="print"><a class="trigger"
href="#">Print</a>
>>
>>
<a href="#" onclick="printPage()">This
Page</a></li>
>>
<a href="#">Entire Document</a></li>
>>
>> </li>
>>
>> <li id="contact"><a
href="mailto:[email protected]">Contact</a></li>
>>
>> <li id="next"><a
href="#">Next</a></li>
>>
>>
>> <br class="clearit" />
>> </div>
>>
>>
A POTENTIAL SOURCE OF CONFLICT?
>>
>> Please look at the unadjusted page again and notice
(visually it is
>> impossible) that the <div> tag containing the
menu bar extends across the
>> entire width of the page including that portion
contained by the sidebar.
>> I am
>> guessing that your suggested adjustments might work,
if the menu bar
>> could be
>> made to begin after the sidebar. The current
<div> structure is
>>
>> <div id="sidebar1"></div>
>> <div id="menuwrapper"></div>
>> <div id="maincontent"></div>
>>
>>
WEBPAGE
>>
>>
>>
http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Contents/utility/practice.
>> html
>>
>> Roddy
>>
> -
Contribute and Project Seven Plugins
I have a client that has Contribute and wants to do more
updating of their website and ultimately manage the majority of
content updating themselves. I suggested Contribute and they have
that. However, the website uses several PVII plugins, specifically
Tab Bar Magic, Tab Panel Magic and Accordion Panel Magic.
Since I don't use Contribute at all and have the full
DWCS3/Adobe CS3 Suite I am wondering:
1. Should I recreate a more "Contribute friendly" template
and website design that will be easier for the client to update
using Contribute? If so what are the issues surrounding this if I
am using PVII plugins? Should I scrap using PVII plugins
altogether?
2. Should the client invest in the full DWCS3 and purchase
PVII plugins so they can have ultimate control of adding new pages
based on the template design and so forth without any plugin
issues?
Here is the website:
http://ilheadstart.orgThanks for the reply. I am going to download the Contribute
CS3 and play with it. However, I believe my client has Contribute 3
and not the CS3 version. Will that matter any?
The template for the website already has a "main body"
editable region which is where new content can be added on a blank
page from scratch.
Okay so it's confirmed my client does not need to purchase
any P7 plugins. I was not clear how that worked with Contribute. I
am assuming the plugin effects just appear as they would but the
client can't edit any of that? Maybe once I have the trial program
I can see this for myself and answer it that way.
Also, you say the P7 plugins do not mess up edit mode. Again,
maybe I can best understand this when I toy around in the
application.
My only other question is since the client has Contribute 3
and I will be using a trial of Contribute CS3, will there be a
significant new set of features I will see that they will not?
Lastly, looks like CS4 is coming or at least it's announced. Should
I recommend my client upgrade to Contribute CS3 or wait until
Contribute CS4 comes out? Please advise, thanks!
Dante -
Question regarding Project Seven Pop-ups
Hi all,
I need to create a pop-up menu. I have not doe this in ages. I still Have the PVII product called Snap Menus, Snap Layers etc.
I am reading here that PVII PMM2 is the product of choice thses days. Also, it seems that Snap Layers/Menus isn't supported any more.
I don't often have the need to do pop-up menus. Would it be in my best interest to spend the money and use PMM2 over Snap Layers/Menus, Or go ahead and use the ole faithful?
Thanks
PFPMM2 is much more sophisticated than ealier menus. Only you know if it's a worthwhile investment or not. This is from the PVII site.
When to step up to a full-featured menu system
If you need multiple flyouts or a vertically oriented menu, then you need to be using a fully-featured and automated menu system like Pop Menu Magic (PMM), which is designed to be used (and usable) in a multi-level scenario. PMM is carefully programmed to allow a person to move his pointing device diagonally, without the entire menu snapping shut. PMM also contains automatic features to highlight the current page link, to reposition a sub-menu if it detects that there is not enough space to fully display it - and much more. All-in-all, PMM is simply the best menu-building system for Dreamweaver users - bar none - with a totally automated user interface in which to manage all aspects of your menu code.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb -
Flex SDK incorrectly handling projection center
I'm not sure if anyone else is noticing this, but I've recently had trouble with the projection center of my Flex projects. According to the documentation - the default projection center is supposed to be the center of the stage. However, my flex apps by default are using (0,0) as the projection center. I'm having to manually set it as the center using:
var per:PerspectiveProjection = new PerspectiveProjection();
var pt:Point = new Point(this.stage.width/2,this.stage.height/2);
per.projectionCenter = pt;
this.transform.perspectiveProjection = per;
This works, but I'm not sure why it's not this way by default - this is not a problem using Flash CS4, only using the flex sdk. What's weird for me, is I don't remember this being an issue in the past - I'm running on a new computer, with new installs of both Flex Builder 3 and Flash Builder 4 (Both exhibit this behavior along with SDK 3.2, 3.3, and 3.4)
I feel like I must be missing something easy here - any ideas?You don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O. -
Is there a way to create a CSS image gallery with caption?
Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
> -
I do not have the 'Advanced' tab on the menu bar. I am trying to change ringtone on my iphone 4s. Have done the following: Right cick on song, entered the start and stop times, but unable to proceed as need 'Advanced' tab in order to change to option.
You don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O. -
I lost the blue tab on my spry menu.
I've saved my document and re-opened it, but still can't get the blue spry menu tab to show. Also can't see my submenus in the browser. It shows in my code. Here is my code.
<table width="878" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="878" height="37" align="center" valign="middle" bgcolor="#D1D1D1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="#">Become A Member</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">NEWS</a>
<ul>
<li><a href="#">Events</a> </li>
<li><a href="#">Job Listings</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Chamber Calendar</a></li>
<li><a href="#">Community Calendar</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
<ul>
<li><a href="#">Scott Air Force Base</a></li>
<li><a href="#">City of O'Fallon</a></li>
<li><a href="#">O'Fallon Welcome Guide</a></li>
<li><a href="#">O'Fallon-Shiloh Area Restaurant Guide</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Shiloh</a>
<ul>
<li><a href="#">Village of Shiloh</a></li>
<li><a href="#">Village Services Guide</a></li>
<li><a href="#">Shiloh Community Calendar</a></li>
</ul>
</li>
<li><a href="#">Events & Reception Planning Guide</a></li>
<li><a href="#">Relocation Packet Info</a></li>
<li><a href="#">The Tourism Burea Illinois South</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">CONTACT US</a>
<ul>
<li><a href="#">Member Login</a></li>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Community Business Info</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">JOIN US</a>
<ul>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Become A Member</a></li>
<li><a href="#">Member Login</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMITTEES</a>
<ul>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Star Investors</a></li>
<li><a href="#">Member Directory</a></li>
</ul>
</li>
<li><a href="#">PHOTO GALLERY</a></li>
</ul></td>
</tr>
</table>
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width: 878px;
white-space: nowrap;
display: inline;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 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 auto;
padding: 0;
position: relative;
text-align: left;
cursor: default;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-weight: normal;
font-style: normal;
font-size: 87%;
white-space: nowrap;
line-height: normal;
width: auto;
clear: none;
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: auto;
position: absolute;
left: 1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
text-align: left;
white-space: nowrap;
display: block;
float: none;
font-size: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-style: normal;
line-height: normal;
font-weight: bolder;
text-transform: none;
background-color: transparent;
width: auto;
position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin-top: -5%;
margin-right: 0px;
margin-bottom: 0;
margin-left: 95%;
position: absolute;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-top-color: #021844;
border-right-color: #021844;
border-bottom-color: #021844;
border-left-color: #021844;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #021844;
color: #FFF;
text-decoration: none;
border: 1px solid #FFF;
text-align: left;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #036009;
background-color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: none;
background-position: 95% 50%;
background-color: #021844;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRightHover.gif);
background-position: 95% 50%;
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: none;
background-position: 95% 50%;
color: #036009;
background-color: #FFF;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponentYou don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O. -
Pvii pop menu magic problems in ie11
I just installed pvii pop menu magic in dreamweaver. The horizontal menu I created looks great in firefox. It is centered, the corners are rounded an the animation is great.
In internet Explorer the menu is to the left, the edges are not rounded an the animation is minimal. What is going on? How do I fix this.
Here is the htmk code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta id="p7PM3" name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
</head>
<body>
<div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz responsive menu-centered rounded auto-subs sub-left justified">
<div id="p7PM3tb_1" class="pmm3-toolbar closed"><a href="#" title="Hide/Show Menu">≡</a></div>
<ul>
<li><a href="cliffsteele.html">Home</a></li>
<li><a href="#">Resort</a>
<ul>
<li><a href="facilities.html">Our Facility</a></li>
<li><a href="Kennel.html">Boarding and Daycare</a></li>
<li><a href="spa.html">Grooming</a></li>
<li><a href="#">Rates</a></li>
<li><a href="friendsgallery.html">Our Guests</a></li>
</ul>
</li>
<li><a href="#">Show Handling</a>
<ul>
<li><a href="handlinginfo.html">Info</a></li>
<li><a href="handlingrates.html">Rates</a></li>
<li><a href="calendar.html">Schedule</a></li>
</ul>
</li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="Contact.html">Contact Me</a></li>
</ul>
<script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,1)</script>
</div>
</body>
</html>
=========================================================================
Here is the CSS:
Pop Menu Magic 3
by Project Seven Development
www.projectseven.com
Style Theme: 01 - Basic
.p7PM3-01 {
line-height: 1;
font-size: 18px;
font-family: "Arial Narrow", Arial, sans-serif;
font-stretch: condensed;
-webkit-transform-style: preserve-3d;
.p7PM3-01.horiz {
padding: 0px 8px;
.pmm3-toolbar {
display: none;
.p7PM3-01 a img {
border: none;
vertical-align: bottom;
.p7PM3-01.menu-centered {
text-align: center;
.p7PM3-01.menu-right {
text-align: right;
.p7PM3-01:after {
content: "\0020";
clear: both;
font-size: 0px;
line-height: 0;
display: inline;
height: 0px;
.p7PM3-01 ul {
margin: 0px;
padding: 0px;
display: inline-block;
vertical-align: bottom;
.p7PM3-01 ul li {
list-style-type: none;
float: left;
position: relative;
.p7PM3-01 ul li a {
display: block;
padding: 12px 18px;
color: #FFF;
text-decoration: none;
background-position: left center;
background-repeat: no-repeat;
background-color: #93A5C4;
.p7PM3-01 ul li a.pm3-link:hover {
background-color: #D6D6D6;
color: #000000;
.p7PM3-01 a.trig_closed {
background-image: url(img/pmm3-right-dark.gif);
.p7PM3-01 ul ul a.trig_closed {
background-image: url(img/pmm3-right-medium.gif);
.p7PM3-01 a.trig_open {
background-image: url(img/pmm3-down-medium.gif);
background-color: #93A5C4;
color: #FFF;
.p7PM3-01 ul ul li a {
border: none;
border-bottom: 1px solid rgba(0,0,0,.8);
color: #FFF;
font-size: 0.9em;
.p7PM3-01 ul ul li:last-child a {
border-bottom: none;
.p7PM3-01 ul ul li a.pm3-link:hover, .p7PM3-01 ul ul li a.trig_open {
background-color: #999999;
color: #FFF;
/*Turn off BG Image for links that are not triggers*/
.p7PM3-01 ul li a.pm3-link, .p7PM3-01 ul li a.pm3-link:hover {
background-image: none;
.p7PM3-01 ul ul {
background: linear-gradient(90deg, rgba(34,34,34,1), rgba(0,0,0,1));
background-color: #93A5C4;
display: block;
text-align: left;
width: 200px;
.p7PM3-01.transparent ul ul {
background: linear-gradient(90deg, rgba(34,34,34,1), rgba(0,0,0,.95));
.p7PM3-01.shadows ul ul {
box-shadow: 10px 10px 30px rgba(0,0,0,.5);
.p7PM3-01.auto-subs ul ul {
width: auto;
.p7PM3-01.auto-subs ul ul li a {
white-space: nowrap;
.p7PM3-01 ul ul li {
position: relative;
float: none;
margin: 0px;
padding: 0px;
/*ROUNDED CORNERS OPTION - Sub-Center Bias*/
.p7PM3-01.rounded ul ul {
border-radius: 5px;
.p7PM3-01.rounded.justified ul li.pm3first ul.level_2,
.p7PM3-01.rounded.sub-left ul ul {
border-top-left-radius: 0px;
.p7PM3-01.rounded.sub-left ul ul ul {
border-top-left-radius: 5px;
.p7PM3-01.rounded.justified ul li.pm3last ul.level_2 {
border-top-right-radius: 0px;
.p7PM3-01.rounded ul a.root_trig,
.p7PM3-01.rounded ul a.root_link {
border-radius: 5px 5px 5px 5px;
.p7PM3-01.rounded a.root_trig.trig_open {
border-radius: 5px 5px 0px 0px;
.p7PM3-01.rounded ul ul a.pm3first,
.p7PM3-01.rounded ul ul .pm3first.pmm3-title-bar {
border-radius: 5px 5px 0px 0px;
.p7PM3-01.rounded.sub-centered.justified ul li.pm3first ul.level_2 a.pm3first,
.p7PM3-01.rounded.sub-right.justified .pm3first .level_2 a.pm3first,
.p7PM3-01.rounded.sub-left ul.level_2 a.pm3first {
border-top-left-radius: 0px;
.p7PM3-01.rounded.sub-left ul.level_3 a.pm3first,
.p7PM3-01.rounded.sub-left.justified .pm3last ul.level_2,
.p7PM3-01.rounded.sub-left.justified .pm3last ul.level_2 a.pm3first,
.p7PM3-01.rounded.sub-right.justified .pm3first .level_2 ul a.pm3first {
border-top-left-radius: 5px;
.p7PM3-01.rounded.justified ul li.pm3last ul.level_2 a.pm3first,
.p7PM3-01.rounded.sub-right ul.level_2,
.p7PM3-01.rounded.sub-right ul.level_2 a.pm3first {
border-top-right-radius: 0px;
.p7PM3-01.rounded.sub-right ul.level_2 ul,
.p7PM3-01.rounded.sub-right ul.level_2 ul a.pm3first {
border-top-right-radius: 5px;
.p7PM3-01.rounded.sub-right.justified .pm3first .level_2,
.p7PM3-01.rounded.sub-right.justified .pm3first .level_2 a.pm3first {
border-top-right-radius: 5px;
.p7PM3-01.rounded ul ul a.pm3last,
.p7PM3-01.rounded ul ul .pm3last.pmm3-title-bar {
border-radius: 0px 0px 5px 5px;
.p7PM3-01.rounded ul ul a.pm3first.pm3last {
border-radius: 5px 5px 5px 5px;
.p7PM3-01.rounded ul a.root_trig.trig_up {
border-radius: 5px 5px 5px 5px;
.p7PM3-01.rounded li.trig_up div {
padding-bottom: 10px;
.p7PM3-01.rounded .trig_up a.pm3first {
border-radius: 5px 5px 5px 5px !important;
.p7PM3-01.rounded ul li.trig_up ul {
border-radius: 5px 5px 5px 5px;
.p7PM3-01.rounded .trig_up .pm3first.pmm3-title-bar {
border-radius: 5px 5px 0px 0px !important;
.p7PM3-01.rounded .trig_up .pm3last.pmm3-title-bar {
border-radius: 0px 0px 5px 5px !important;
.p7PM3-01.vert.rounded {
border-radius: 5px;
.p7PM3-01.vert.rounded a.root_trig {
border-radius: 5px 5px 5px 5px;
.p7PM3-01.vert.rounded ul ul {
border-radius: 5px;
/*DISPLAY AS TITLE ONLY*/
.p7PM3-01 .pmm3-title-bar {
padding: 12px 18px;
color: #DDD;
background-color: #666;
.p7PM3-01.auto-subs ul ul .pmm3-title-bar {
white-space: nowrap;
/*IMAGE LINKS*/
.p7PM3-01 .p7PM3_img {
border: none;
padding: 0px;
text-align: center;
background: none !important;
.p7PM3-01 .p7PM3_img img {
border: none;
width: auto !important;
height: auto !important;
max-width: 100%;
vertical-align: bottom;
/*VERTICAL MODE */
.p7PM3-01.vert {
background: none;
border: none;
.p7PM3-01.vert.shadows {
box-shadow: none;
.p7PM3-01.vert ul {
display: block;
.p7PM3-01.vert ul li {
float: none;
padding: 0px;
position: relative;
.p7PM3-01.vert ul ul li {
padding: 0px;
margin: 0px;
/*CURRENT MARK */
.p7PM3-01 ul li a.current_mark {
text-shadow: -.5px 0px 0px #000;
.p7PM3-01 ul ul li a.current_mark {
color: #FFF;
font-weight: bold;
text-shadow: none;
.p7PM3-01.vert ul li a.current_mark {
font-weight: bold;
text-shadow: none;
NO-SCRIPT RULES
The following rules enable your menu to work even when javascript is disabled in the browser
.p7PM3-01.p7PM3noscript {
position: relative;
.p7PM3-01.p7PM3noscript ul ul {
position: absolute;
display: none;
top: 100%;
.p7PM3-01.p7PM3noscript ul ul ul {
display: none;
top: 0px;
left: 100%;
.p7PM3-01.vert.p7PM3noscript ul ul {
top: 0px;
left: 100%;
.p7PM3-01.p7PM3noscript li:hover ul {
display: block;
.p7PM3-01.p7PM3noscript li:hover ul ul, .p7PM3-01.p7PM3noscript li:hover ul ul ul, .p7PM3-01.p7PM3noscript li:hover ul ul ul ul, .p7PM3-01.p7PM3noscript li:hover ul ul ul ul ul, .p7PM3-01.p7PM3noscript li:hover ul ul ul ul ul ul {
display: none;
.p7PM3-01.p7PM3noscript li li:hover ul, .p7PM3-01.p7PM3noscript li li li:hover ul, .p7PM3-01.p7PM3noscript li li li li:hover ul, .p7PM3-01.p7PM3noscript li li li li li:hover ul, .p7PM3-01.p7PM3noscript li li li li li li:hover ul {
display: block;
/*BREADCRUMBS*/
.p7PM3-01_crumbs.centered {
text-align: center;
.p7PM3-01_crumbs.right {
text-align: right;
.p7PM3-01_crumbs ul {
margin: 0px;
padding: 0px;
overflow: hidden;
font-size: 1em;
display: inline-block;
.p7PM3-01_crumbs li {
list-style-type: none;
display: block;
float: left;
margin-right: .25em;
.p7PM3-01_crumbs a {
text-decoration: none;
color: #000;
.p7PM3-01_crumbs a:hover {
text-decoration: underline;
.p7PM3-01_crumbs li:last-child {
margin-right: 0px;
font-weight: bold;
.p7PM3-01_crumbs.thick-arrow li:after {
content: "\0020 \0020 \27A7";
.p7PM3-01_crumbs.thin-arrow li:after {
content: "\0020 \0020 \279F";
.p7PM3-01_crumbs.open-arrow li:after {
content: "\0020 \0020 \21E8";
.p7PM3-01_crumbs.triangle-dots li:after {
content: "\0020 \0020 \2234";
.p7PM3-01_crumbs.double-colon li:after {
content: "\0020 \0020 \2237";
.p7PM3-01_crumbs.pipe li:after {
content: "\0020 \0020 |";
.p7PM3-01_crumbs.dash li:after {
content: "\0020 \0020 -";
.p7PM3-01_crumbs li:last-child:after {
content: "\0020";
/*END BREADCRUMB RULES*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7PM3-01.responsive:after {
display: none;
.p7PM3-01.responsive .pmm3-toolbar {
display: block;
background-color: #222;
padding: 10px;
text-align: right;
cursor: pointer;
.p7PM3-01.responsive .pmm3-toolbar a {
font-size: 2em;
font-weight: bold;
color: #999;
text-decoration: none;
.p7PM3-01.responsive .pmm3-toolbar a:hover {
color: #FFF;
.p7PM3-01.responsive .toggle-text.closed a:before {
content: "Show Menu \0020";
font-size: .5em;
.p7PM3-01.responsive .toggle-text.opened a:before {
content: "Hide Menu \0020";
font-size: .5em;
.p7PM3-01.responsive .pmm3-toolbar {
display: block;
background-color: #222;
padding: 10px;
.p7PM3-01.responsive {
text-align: left !important;
padding: 0px !important;
.p7PM3-01.responsive.vert ul {
margin-top: 0px;
.p7PM3-01.responsive ul {
display: block;
.p7PM3-01.responsive ul li {
float: none;
margin-right: 0px;
.p7PM3-01.responsive a.trig_closed:hover {
background-color: #222;
color: #DDD;
.p7PM3-01.responsive ul ul {
position: static !important;
width: auto;
.p7PM3-01.responsive .pmm3-title-bar {
padding: 12px 18px;
.p7PM3-01.responsive ul ul a,
.p7PM3-01.responsive ul ul .pmm3-title-bar {
padding-left: 24px;
.p7PM3-01.responsive ul ul ul a,
.p7PM3-01.responsive ul ul ul .pmm3-title-bar {
padding-left: 32px;
.p7PM3-01.responsive ul.closed {
display: none;
.p7PM3-01.responsive ul.opened {
display: block;
.p7PM3-01.responsive.rounded,
.p7PM3-01.responsive.rounded * {
border-radius: 0px !important;
.p7PM3-01.responsive.shadows * {
box-shadow: none !important;
.p7PM3-01_crumbs {
display: none;
.p7PM3-01_crumbs.show-mobile {
display: block;
/*Workaround for very old Android devices*/
.p7PM3-01 div {
left: 0px !important;
top: 0px !important;
/*End old Android workaround*/Can compatibility mode be turned off in the user’s browser via javascript?
Ordinarily, compatibility mode is only necessary with older web sites when pages DON'T appear as they should. Most people don't even know how to enable it.
I can't remember if Project Seven uses the X-UA Edge meta tag in their source code or not.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Basically, this tells IE to use the highest mode available for that browser version. Example: IE8 in IE8 mode, IE9 in IE9 mode and so forth...
Nancy O. -
Spry Menu Bar jumps off screen-right in CS6
Frustrating little glitch I'm experiencing. When in a NON-LIVE mode in CS6, I have a Spry Menu Bar that I've placed, customized and is functioning properly. It is precisely in the right location in BOTH live mode and in a browser preview, however, when I am editing the site the menu bar jumps off screen right to where I have to scroll right to locate it. The only thing that pops it back in to place is by tweaking a setting like "Float" from right to left then back to right. But once I begin to edit the site again it will jump off the screen. This isn't a massive deal since it remains in place in live and preview modes, it's just annoying for layout purposes while I'm editing. It sort of screws up the aesthetic of the layout. Has anyone found the same problem? Below is my layout.css and my Spry Menu css.
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 6;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 95.8695%;
padding-left: 1.0652%;
padding-right: 1.0652%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#maincontent {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
#navigation {
clear: none;
float: left;
margin-left: auto;
width: 100%;
display: block;
margin-top: 20px;
margin-bottom: 20px;
background-color: #300;
height: 16px;
top: 5px;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
background-attachment: fixed;
background-image: url(../bkgdContent.png);
background-repeat: repeat;
margin-top: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
#maincontent {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 16px;
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#donatecontent {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
#theride-content {
clear: both;
float: left;
margin-left: 0;
width: 49.1712%;
display: block;
#donate-content {
clear: none;
float: left;
margin-left: 1.6574%;
width: 49.1712%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.0217%;
max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
#maincontent {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
#donatecontent {
clear: none;
float: left;
margin-left: 1.0989%;
width: 100%;
display: block;
#donate-content {
clear: none;
float: left;
margin-left: 1.0989%;
width: 32.6007%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#theride-content {
clear: none;
float: left;
margin-left: 1.0989%;
width: 32.6007%;
display: block;
#whf-content {
font-family: Georgia, "Times New Roman", Times, serif;
SPRY CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
float: right;
/* 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;
text-align: left;
cursor: pointer;
width: 4.3em;
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: 4.3em;
position: relative;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: relative;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #300;
color: #FFF;
text-decoration: none;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
height: 16px;
padding: 0px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #003;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #003;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Design view is not reliable. Learn to work in Code View or Split View with Live View to check your layout.
Spry menus are not responsive so they will not work well in a Fluid Grid Layout. Find a better menu system.
Project Seven Responsive Tabs
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
In the meantime,
It's often easier to work with an unstyled HTML page.
To disable CSS, go to View > Style Rendering > untick Display Styles.
Or, use a Design-Time Style Sheet.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.h tml
Nancy O. -
it also opens in the parent window at the same time. For
instance, I have a home page and when you click on a link I want it
to open up in a new browser window. so i set the behavior to do
this and it works. However, the first window also changes to the
new link so I then have two windows open with the same link I just
clicked on. The main window doesn't stay as the home page. any
suggestions? Thanks.Also David Powers' Smart Link extension may come in handy:
(2nd extension on the page)
http://japan-interface.co.uk/webdesign/tools/index.html
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Forum Posting Guidelines:
http://www.adobe.com/support/forums/guidelines.html
CSS Tutorials for Dreamweaver:
http://www.adobe.com/devnet/dreamweaver/css.html
": Nadia : ** Adobe Community Expert **"
<[email protected]> wrote in message
news:[email protected]...
> You need to add a "return: false" statement to the link
so that it
> doesn't open onto itself....
> A better explanation can be found here:
>
http://apptools.com/rants/popups.php
>
>
> Project seven has this niftly little app available
(commercial - but it's
> served me well over time :)
>
http://www.projectseven.com/products/prodtools/powertoys/powertoys_retfalse.htm
>
>
> --
> Nadia
> Adobe® Community Expert : Dreamweaver
> ----------------------------------------
> CSS Templates |Tutorials |SEO Articles
>
http://www.DreamweaverResources.com
> ~ Customisation Service Available ~
>
http://www.csstemplates.com.au
> ----------------------------------------
> Forum Posting Guidelines:
>
http://www.adobe.com/support/forums/guidelines.html
> CSS Tutorials for Dreamweaver:
>
http://www.adobe.com/devnet/dreamweaver/css.html
>
>
>
>
> "Alexandra Christensen"
<[email protected]> wrote in message
> news:[email protected]...
>> it also opens in the parent window at the same time.
For instance, I have
>> a
>> home page and when you click on a link I want it to
open up in a new
>> browser
>> window. so i set the behavior to do this and it
works. However, the first
>> window also changes to the new link so I then have
two windows open with
>> the
>> same link I just clicked on. The main window doesn't
stay as the home
>> page. any
>> suggestions? Thanks.
>>
>
> -
How do i find the tablet.css, ipad.css and desktop.css files? I am trying to make my website user friendly for all phones and ipads but cant seem to find the correct files?
Are they files i have to create myself or are they already on my computer somewhere? Also i have watched all of the videos on how to do the multi screen authoring however none of them explain where or how to create the relevant (.css) files?
I am new to this so any help would be greatly appreciated.
DeclanSorry but there's no magic button that can convert your current site's CSS into a responsive one. Start over with a FluidGrid Layout or begin with one of the very popular Responsive Design Frameworks shown below. When you have a layout you like, copy & paste your old site's content into the new one.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Nancy O. -
I've just started to use jquery to put my photography into a neat slideshow but I'm having trouble as the images keep getting cropped off. On this page:
http://ryan-harding.com/photography/travel/beijing.html
Notice how on the far right of "Prev" and "Next", there are two arrows. If you scroll through them, my images can be seen; but only part of them. I need to be able to see the whole image, not just part of it. Any idea what I'm doing wrong?
I'm using Windows 7 and Dreamweaver CS5.5. The source code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ryan Harding - Photography - Travel - Beijing</title>
<link href="../../twoColLiqLt.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<style type="text/css">
#num {padding-left: 6px;}
.img-bot {
display: block;
padding: 15px;
visibility: inherit;
font-family: Georgia, Arial;
font-size: 14px;
line-height: 1.3px;
float: none;
overflow: auto;
z-index: auto;
</style>
<script type='text/javascript' src='http://www.ryan-harding.com/ndxz-studio/site/js/jquery.js'></script>
<script type='text/javascript' src='http://www.ryan-harding.com/ndxz-studio/site/js/cookie.js'></script>
<script type='text/javascript' src='http://www.ryan-harding.com/ndxz-studio/site/js/jquery.cycle.all.js'></script>
<script type='text/javascript'>
path = 'http://www.ryan-harding.com/files/gimgs/';
$(document).ready(function()
setTimeout('move_up()', 1);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#s1').cycle({
fx:'fade',
speed:'2000',
timeout: 0,
next:'#next', prev:'#prev'});
</script>
</head>
<body>
<div class="sidebar1">
<ul class="nav">
<li>
<div align="center">
<h1><a href="../../index.html">Ryan<br />
Harding</a></h1>
</div>
</li>
<li><a href="../../index.html" title="News">News</a></li>
<li><a href="../../photography.html" title="Photography">Photography</a></li>
<li><a href="../../filmography.html" title="Filmography">Filmography</a></li>
<li><a href="../../essays.html" title="Cinematic Thoughts">Cinematic Thoughts</a><a href="../../about.html" title="About">About</a></li>
</ul>
</div>
<div id='img-container'>
<p class='content'><a id='prev' href='#'>Prev</a> | <a id='next' href='#'>Next</a></p>
<div id='s1' class='content'>
<div><img src='http://www.ryan-harding.com/files/gimgs/1138.jpg' class='img-bot' /><p> </p></div>
<div><img src='http://www.ryan-harding.com/files/gimgs/1139copy3.jpg' class='img-bot' /><p> </p></div>
<div><img src='http://www.ryan-harding.com/files/gimgs/1616b.jpg' class='img-bot' /><p> </p></div>
</div>
</div>
</body>
</html>
And the CSS code is:
@charset "utf-8";
body {
margin: 0;
color: #000;
background-color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 60%;
line-height: 1.4;
overflow: auto;
z-index: auto;
visibility: visible;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
background-color: #FFF;
width: auto;
height: auto;
overflow: visible;
visibility: inherit;
z-index: auto;
font-family: Georgia, Arial;
padding-right: 15px;
padding-left: 15px;
line-height: 1.3;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#000;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #000;
text-decoration: underline;
background-color: #FFF;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 1040px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
z-index: auto;
visibility: visible;
float: none;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
background-color: #FFF;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
color: #000;
padding-top: 10px;
.content {
float: none;
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
overflow: auto;
z-index: auto;
visibility: visible;
width: 80%;
font-size: 14px;
font-family: Georgia, Arial;
line-height: 1.3;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
background-color: #FFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
color: #000;
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
font-size: 14px;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
color: #000;
background-color: #FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #000;
background-color: #FFF;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
/* ~~miscellaneous float/clear classes~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.img-container {
float: none;
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
overflow: auto;
z-index: auto;
visibility: visible;
width: 80%;
font-size: 14px;
font-family: Georgia, Arial;
line-height: 1.3;
Not sure if any other details are required, let me know if so. Thanks for any help given!Liquid Layouts (% based widths) are very tricky to work with, even for experienced web designers.
I think you'll have bettter results if you stick with a basic 1 or 2 column, fixed-width & centered layout.
For commercial CSS Templates that are rock solid and perform well in all browsers, visit Project Seven:
http://www.projectseven.com/products/index.htm
Not Just a Grid CSS Framework
http://www.notjustagrid.com/demo.asp
Free CSS Starter Templates
http://alt-web.com/Free-CSS-Templates.shtml
EZ-CSS Templates (watch the screencast to see how it works)
http://www.ez-css.org/css_templates
Dreamweaver CSS Templates for beginners (free)
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Ultimate Multi-Column Layouts (free)
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Pop-up menu feature and IE issues
I am using Firework MX 2004, Version 7.0 Build 288, to create drop down menus using the “Pop-up Menu” feature. The pop-up menus that I create work great in Netscape and Firefox, but fair in IE 6.0. The pop-up menus appear under certain elements such as select boxes in IE 6.0. I have read and tried some of the solutions on Blogs in regard to setting the z-index in div tags, but to no avail. Any help or work around would be greatly appreciated! Unfortunately, the huge company I work at switched from Netscape to IE 6.0 as the corporate platform, and I don’t have the patients to upgrade Fireworks if that is the solution. The last time I upgraded from Fireworks 4 toFirework MX 2004 the Macromedia Tech Support area had to e-mail me special registry entries for the product registration to work, and it took a very long time. I still have the emails to remind me of the pain. Thanks William!
I found this: http://kb2.adobe.com/cps/158/tn_15842.html
And this:
Fireworks generated html and javascript calls its layers with a z-index beggining with a value of 1. Try doing a search of text external JS file and you will see your menus.
I would rename the offending layer that runs over the top of the menu layers in the with z-index:0
Also this: http://www.adobe.com/devnet/fireworks/articles/fw8_popups.html
Hope something here works, that being said...the menus from that version arenb't very good. a better solution is CSS menus. A quick solution is from Project Seven here:http://projectseven.com/products/menusystems/pmm2/index.htm for $95. It's a DW extension and simple to use. Alkso compatiple with most browsers. -
Looking for a simple tutorial to building my first responsive web site in Dreamweaver CC.
I am looking for a simple tutorial to building my first responsive web site in Dreamweaver CC.
I have watched the tv.adobe video 3 times and I cam not able to do the actions the author shows.
help.
Ken EdwardsResponsive and simple don't go hand-in-hand. First do some prep-work to understand the concepts.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Jump start your RWD projects with any of the Responsive Frameworks below:
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Have fun!!
Nancy O.
Maybe you are looking for
-
Oracle 10g Client not working in Windows 7 64 bit
Dear All, Not ablle to install Oracle 10g Client (Rel 2) in Windows 7 64 bit , getting an abnormal error and stoping .. Please suggest me how to proceed futher
-
HI, I have an scenario of file-idoc. I would be receiving 2 files from 2 different systems.. one file would be giving the status of the second file.. Like the first file converted into idoc would be giving information to SAP of how to deal with the s
-
Unable to upload configuration
When uploading saved configuration, it results in the message Unable to upload configuration. I have been able to upload any of 3 different configurations until today. I have tried power off/on on base station. The base station is working OK with the
-
Group Permission on Active Directory ?
Hello every body ... PLz Help Me . I want To create the Group That its members can remote as a limited user and disconnect automatically at 14:00 pm from Server . (with AD) how to do this job ?
-
Connect SAP B1 server to Remote Client
hi experts.. i want to know how to connect the SAP B1 server to the Remote SAP B1 client machine.