Accordion navigation bar styling.

Hi,
I'm wondering if it is possible to create a one page website which includes a "metro style" accordion navigation bar that holds the content for the website within each tab?
I know this is possible within jquery/css etc but would like to build it in muse if possible. The idea is that the landing page will consist of one image filling the entire screen with a "metro tabbed" style navigation bar and I would like the content to be animated and slide down/or across the page into view?

Hello,
In Muse you can only either use the usual menu bar from the menus widgets or you may also use the normal accordion panel which again is provided in the widgets panel. For your specifc requirement, as you have quoted correctly, you'll need to insert some CSS etc. in Muse using the Object -> Insert HTML option.
Cheers
Parikshit

Similar Messages

CSS or JS Navigation Bar with inline Styled Search Field

Does anyone know of a good tutorial on how to create a CSS or
JS navigation bar that would contain a matching styled search field
box?
I have tried creating something like this a couple of times
using the old JS Navigation Bar wizard in DW, but can't get the
results I need. I can never seem to add a column that would include
a search box and have it look right and inline with the rest of the
navigation.
For reference, I am trying to do a nav that is somewhat
similiar to Apple's Nav bar, where the search field is styled to
match the rest of the Nav and inline with the rest of the buttons.
Any thoughts?
Thanks.

You don't need to use PMM. You can set your menu container to
position:
relative and then absolutely position the search box inside.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"destind4film" <[email protected]> wrote in
message
news:fkukir$8l4$[email protected]..
> Hi Al,
>
> Thanks for the quick reply. I had actually checked your
site earlier
> today,
> since I have had such an awesome experience with your
accordion menus.
>
> That example is almost exactly what I am trying to do,
minus the dropdown
> menu
> buttons. The buttons currently are just simple rollovers
that go directly
> to
> other pages, but I am trying to place a styled search
box to the right
> like
> your example has.
>
> Here is the current page (also using the PVII Accordion
Menu) that does
> not
> have the search added yet, but you can see that I have
plenty of real
> estate to
> include one:
>
>
http://www.dvdflashbacks.com/mrhubcap/
>
> Questions:
> Can the pop menu be used with my current roll over
images for basic Nav
> bars
> like this?
> How easy is it to add the search field to this menu?
(This is a PHP/MySql
> backend for the site using Cartweaver3. I have a php
search snippet from
> CW3
> that I was trying to stick into a table cell next to
this nav but the cell
> would never align properly for some reason.)
>
> Thank you very much and Merry 'Belated' Christmas!
>

How can I create a navigation bar in the template so I can change the down state of a button on a page made from the template in DW3?

We're creating pages from a template in DW3. The template includes a header, footer and a navigation bar. We've made the navigation bar an editable region so that we can change the down state of the buttons on pages where it is required. However, when we make a new page from the template and try to change the behaviors of the buttons in the navigation bar it will not allow us to make those changes.

Have you considered using CSS styled text/list menus instead of image rollovers. It isn't hard really and it's actually a much better choice for web accessibility and for search engines to find and follow your links. Here are some links to several CSS menu systems you can try:
CSS Express Drop-Down Menus (tutorial)
http://www.projectseven.com/tutorials/navigation/auto_hide/
CSS Tab Designer creates 60+ CSS Styled Button and Tab Menus (download)
http://www.highdots.com/css-tab-designer/
List-O-Rama (DW Extension)
http://www.dmxzone.com/go?5618
CSS Menu Maker (On-Line Menu Generator)
http://www.cssmenumaker.com/
Pop-Menu Magic2 by PVII (DW extension purchase)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How do i make a navigation bar for all pages

Hi friends !
I want the same navigation bar to appear on all the web pages of my website. (As these are the common things that all the webpages will have). But I didn't find any option to use the navigation bar as a template.
Will I have to copy and paste the same navigation bar on all the pages (let's say 50 to 60 pages, I will have). It will be very tiresome and tedious job to do.
And also if I make even a minor change in the navigation bar then I will have to change it in all 50-60 pages.
What should I do ?
Please help me in this regard.
Imagine a 100 or 200 page site, perfectly functioning and on the air. Then, one day, you need to add or delete some button, or simply change a link. You need to change the menubar in ALL 200 pages, and then re-publish them all. Quite a work, ah ?
Regards,
Jtechmiami

Although Dreamweaver Templates and Library items are suitable tools for doing this, they're tedious and cumbersome at best. They get old very quickly.
By far the most efficient method is to set your navigation bar up as a Server Side Include (SSI).
SSIs are not Dreamweaver specific, they're a general web technology available on any server.
A good primer here
http://www.projectseven.com/products/menusystems/pmm2/ug-examples/includes/index.htm
Do you already have a hosting account? Does it have PHP available?
jtechmiami wrote:
Imagine a 100 or 200 page site, perfectly functioning and on the air. Then, one day, you need to add or delete some button, or simply change a link. You need to change the menubar in ALL 200 pages, and then re-publish them all. Quite a work, ah ?
Not with SSIs. Simple sitewide menu updates take a few seconds.
You edit a single text file locally (either button labels or a CSS rule for styling the button), upload (1-2 seconds) and every page on the site is instantly updated.
Much better than DW Templates.

Horizontal Navigation Bar

I'm using the Spry horizontal menu bar, and I've got a problem.
In IE7, but not in Firefox or Safari or even IE8, the hover state is apparently only active for the text in the submenus, not the entire 'button'. That is, the list item is styled to look like a button, it's 12 ems wide, the text for most of the items doesn't fill the entire button. If one puts their mouse over the 'empty' part of the button, it seems that the 'hover' state is lost and the submenu disappears. In the image below, if you mouse over Northside, but leave the mouse on the right side of the 'button', the menu will quickly disappear if using IE7; it stays put when using the other browsers.
Very annoying to the user (and to this developer).
The site is http://www.acblunit174.org
I wonder if anyone has an explanation? Is this a known problem with a known workaround?
The css file is included below.
Any advice would be appreciated.
Thanks
Bert Onstott
713-851-1511.
[email protected]
@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
    padding:             0;
    list-style-type:     none;
    font-size:           11px;   /* changed font size to 11px */
    cursor:              default;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    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;
    list-style-type:     none;
    font-size:           100%;
    position:            relative;
    text-align:          left;
    cursor:              pointer;
    width:               auto;     /* set the width to auto for the top level navigation bar items so they fit the text. */
    float:               left;
    padding:             0;
/* 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;
    position:            absolute;
    width:               12em;
    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;
    clear:               left;
/* Menu item containers are seet to 14 ems */
ul.MenuBarHorizontal ul li
    width:               12em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position:            absolute;
    margin:              -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left:                auto;
    top:                 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a pale green block with padding, no text decoration and what amounts to      */
/* and outset border. Specifying 'outset' as the border doesn't work in IE with color CCCC99, */
/* so it has to be simulated by specifying different left, right, top and bottom colors.       */
ul.MenuBarHorizontal a
    display:             block;   /* causes menu items to appear horizontally */
    cursor:              pointer;
    background-color:    #ECE9D8; /* light green */
    color:               #000000; /* black */
    text-decoration:     none;
    border-top-width:    3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width:   3px;
    border-top-style:    solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style:   solid;
    border-top-color:    #CCCC99; /* dark greem */
    border-right-color: #666600; /* light green */
    border-bottom-color: #666600; /* light green */
    border-left-color:   #CCCC99;
    padding-top:         3px;
    padding-right:       4px;
    padding-bottom:      3px;
    padding-left:        3px;
    margin: 1px;
/* Menu items that have mouse over or focus have an olive green background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color:    #999966;
    color:               #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with an olive green background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color:    #999966;
    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: #ECE9D8;*/

I wonder if anyone can tell me easily how to make the submenu's under the horizontal menu bar also appear horizontally?
This question is more suited to the Spry forum.

Can someone please help me make this Navigation bar in Javascript please

Hi I love this Navigation bar :   http://en.wordpress.com I have struggled trying to find tutorials or anything just to try and make it, If someone could make it, I would LOVE IT! I am finding it way to hard just to find help. So please could someone kindly help me out.   Thank you so much!

What exactly is it you like about that element? It's not really a navigation element, it's just a single link in a <header> tag -
<header class="wpcom-header" role="banner">
                    <div>
                              <h1 class="wpcom-title"><a href="//en.wordpress.com/">WordPress.com</a></h1>
                              <nav id="wpcom-navigation" class="main-navigation" role="navigation">
                                        <h3 class="menu-toggle">Menu</h3>
                                        <div class="menu-main-container">
                                                  <ul id="menu-main" class="nav-menu">
                                                            <li id="nav-signin"><a class="nav-highlight" href="#home-signin">Sign In</a></li>
                                                  </ul>
                                        </div>
                              </nav>
                    </div>
          </header>
It's styled with CSS to look the way it does.

My navigation bar issue

I am trying to create a template page for a site with a roll-over button navigation bar.
I can’t seem to make each pg different,
I’d like for a different button to start down on each pg depending on which pg they are on.
I have tried putting an editable region around the entire nav bar or around each button sep. then I save it as a template. When I start a new page using that template, it will not let me decide which button starts in the down position. It says it is locked. I cant figure out where to put the editable region. Nothing is working. It always says ‘locked’
Thank you

Here are some tips I wrote up recently:
Premise: Templates may be used: All styling MUST be controlled from the CSS Stylesheet; ONLY variation from vanilla menubar will be ids applied to all list items. Because it will all be controlled from the Stylesheet, you don't need to go into each page's menu to adjust it.
Body ID: Every page must have an id placed on the Body or a containing div: This may be accomplished with an editable attribute. Example: <body id="homepage"> Or use a div that wraps the menubar. Example: <div id="homepage">. The idea is to have a unique way to specify that particular page and its particular corresponding menu item.
List Item ID: Every menu item must be ID'd if contextual hover/display is required and to avoid the necessity for custom-editing every page's menubar in situ.
Example: <li id="home"><a href="home.html">Home</a></li>
Now, in your CSS file, you set styles for rollover. If you are using a Spry MenuBar, here are the styles to look for:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
This would be whatever styling you have already decided on for the 'normal' rollover and focus. It will apply to all hovered and focused list items (menu items).
You will ADD style selectors that specifically style each list item contextually on its own page. For instance, on the page that has id="homepage" (your index page!), you want the "home" button to be highlighted. For illustration, let's add a couple more pages, #aboutuspage li#aboutus, #contactuspage li#contactus
So in the CSS, do this:
#homepage ul.MenuBarHorizontal #home a,
#aboutuspage ul.MenuBarHorizontal #about a,
#contactuspage ul.MenuBarHorizontal #contactus a,
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
Notice that I have added the additional selectors to the original (you want to KEEP the original rollover!), and used commas to separate them. Don't put a comma after the last one in the list...follow the example.
I have also left off the :hover part of the selector, because you want the #home button to ALWAYS be highlighted when the #homepage is open, not just when it is hovered over. The more general selector in thelist -- the original one -- will take care of the hovering.
This should be all you need to do...be careful and thorough, and you will be able to control it all through the CSS!
Please work through this information and let me know if anything is confusing. I should be back online this evening; for sure tomorrow morning.
Beth
(edited to adjust the placement of the list item id)
Message was edited by: Zabeth69

I need help importing navigation bars and rollover buttons from fireworks?

I need help importing navigation bars and rollover buttons from fireworks, drop down menus and rollover states won't work!
Thanks

In my experience, the code created by graphics apps is less than satisfactory. And image based menus are very awkward for several reasons.
#1 If you decide to change your menu later, you must go back to your graphics app and re-craft the whole thing. After 2-3 times of this, it gets old in a hurry.
#2 Image based menus cannot be "seen" by search engines, screen readers and language translators.
#3 CSS styled text menus are better for your site's visibility, accessibility and they are a snap to edit in Dreamweaver.
That said, if you're still married to image based menus, use Fireworks to create images only. Use Dreamweaver's Image Rollover Behaviors to create your rollover scripts.
Nancy O.

Best way to create a sliding navigation bar

As a newcomer to web design I am just about to embark on my first major project. This requires a navigation bar in a strip down the left edge of the page. I recently stumbled across what i thought was a very elegant and space saving design for this navigation bar at:
http://www.aovet.org/home.aspx
Could anyone point me at a suitable tutorial, resource, or sample code so i can start to get my head around how this is done, or is this just to complex for an enthusiastic but relatively inexperienced guy to try.
Thanks
John

Have you looked at the built-in Spry Accordion Widget (aka Accordion Panels)?
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#D efaultBehavior
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly? As I can't pin it, I keep it on top of the page with scroll effect 0. It collapse, shows the menu buttons but doesn't close back once it reaches the

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly?
As I can't pin it, I keep it on top of the page with scroll effect 0.
It collapse, shows the menu buttons but doesn't close back once it reaches the anchorpoint.

Muse won't let you, at least not that I know of. You could find the class in the code that muse gives it position: fixed…I think. You could paste it into the head area of your page properties to override the class. I believe something like this would give you persistent nav bar, pinned at the very top, on mobile:
#youmuseclass {position: fixed;}
I wouldn't use any parallax on mobile either, the performance is terrible.

FF 5.0. Windows 7 The main navigation bar has suddenly started to bring up my igoogle page each time I enter a query. Is there a way to prevent this from happening?m happening.

I suddenly started getting a black igoogle bar when attempting to use the navigation bar at the left side of the browser.
I have added no add on to which I can attribute this.
I started to eliminate the Igoole program at the site but became concerned when it appeared that I might also remove my gmail account, which I had earlier -and separately from Igoogle- created.
I would like to prevent the google page from coming up when I use the left side of the navigation bar.
Thanks
Sam

This is something you need to report via the Feedback button (or use the link on the Help menu).
Firefox 5.0 is still in BETA and not slated for release until June 21.
Reinstall the full version of the current release which is v4.0.1, download link at the top of this forum.

Some add-ons are missing in the tools menu and / or modules and navigation bar

I am running Firefox 20 FRENCH (this is maybe important as all of this below does not appear with the EN version...) on MacOSX 10.6.8.
Symptoms :
- Web Developer toolbar not displayed anymore.
- Xmarks add-ons not displayed in the module bar.
- Icons of other add-ons displayed in the navigation bar ONLY after the first firefox opening i.e. just after system restart. If firefox is closed and re-opened, all the add-ons icons are lost.
> All the add-ons are installed in tha add-on menu.
> This behavior only appear with the FRENCH versions of firefox (tried 19.0.2 and 20).
> Installed the 19.0.2 ENGLISH version and all is OK !!!
Fixes attempts (tried almost everything...) :
- Reset firefox profile and restart with a new one : no effect (after I have reinstalled all the add-ons one by one...)
- Uninstall Firefox (with profiles folder, cache folders, etc...) then reinstall : no effect
- The only thing that is working is using the ENGLISH version...
This is really annoying because as a web developer I really need the Web Developer extension.
Does anyone has an idea of how to fix this ?
Thank you very much for your help !
Regards,

Does it have any effect if you change the general.useragent.locale pref to en-US ?

Removing that navigation bar in the new Preview

Is there any way of removing the navigation bar which appears at the bottom of the screen when you view images in Preview's full-screen mode?
Under older operating systems you could at least move shift it to the side, but now it doesn't seem possible to move it at all.

Thanks Tony - it was "slideshow mode" I should have referred to. The black navigator box doesn't appear in full screen mode.
The point remains about slideshow mode - it used to be possible to move the black navigation box, but now it seems to be stuck bottom centre.

Pl/sql editor navigation bar

hi!
Is it possible to have the navigation bar for pl/sql editor in Visual Studio inside an Oracle Database Project?
The navigation bar is visible if I open a package body from server explorer, but not if I open the generated create script.
The navigation bar option is disabled in Tools / Options / Text Editor / Oracle pl/sql
Any hints?
thx in advance,
Balint

Create an application item and select your real user name into it within the post authentication process (part of your authentication process). Reference &APP_ITEM. instead of &APP_USER.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
-------------------------------------------------------------------

Why has the "Reload current page" control been moved to the navigation bar Firefox 29? I would like to be able to place it where I had it in Firefox 28.

After getting the Firefox 29 download I tried to rearrange my buttons\controls to where I was used to having them in Firefox 28 and prior. I noticed, in particular, that the "Reload current page" control is no longer available to be set in front of the navigation bar where I've had it for years now. The reason I chose Firefox in the first place was because I could customize it to my liking. I know you can simply right click and "Reload" the tab or just get used to going to the end (right side) of the navigation bar but that defeats the purpose completely for me.
Here's an analogy; Ford decides they will now replace current model cars in the US with British standard style vehicles. Every car sold by Ford will now be right-hand steer. While this may seem like a "no biggy" to some, others, especially those of us who are inclined to drive standard transmission vehicles, may be a bit resistant to that change. Not sure if I successfully made my point or not but hopefully I did.
Initially I thought I'd start by "Has someone fallen and hit their head?' or "Did Steve Ballmer suddenly take over Mozilla, in particular the build of Firefox 29, because this one smells like a Windows 8 (aka the aroma of a full sewer tank on a hot day)?" It is understood that updates are required and as an IT guy, I've been around for many a faux pas where the kinks just need to be worked out. They happen. Maybe some consideration will be made with Firefox 30 to those of us in the states that are used to left-hand steer vehicles.
I may be missing something here, and will gladly fall on my sword if that is the case, but there is no indication that I've seen from the Mozilla sight that the "Reload current page" control can be manipulated in any way as of Firefox 29. On the bright side, I now have a good reason to go back and review some of the browsers I discounted back in the day when I decided to go with Firefox.

As far as I know, [https://addons.mozilla.org/firefox/addon/classicthemerestorer/ the Classic Theme Restorer add-on] is the only way move the Reload button outside the address bar.
# Install [https://addons.mozilla.org/firefox/addon/classicthemerestorer/ Classic Theme Restorer] and restart Firefox when prompted.
# Open the Add-ons Manager (Ctrl+Shift+A; Mac: Command+Shift+A), then the Extensions category.
# Next to Classic Theme Restorer, click the Options button.
# On the Main tab, make sure "Movable back-forward button" and "Hide urlbars stop & reload buttons" are checked. You might also want to check "Combine stop & reload buttons". Close the options window when done.
# Right-click an empty area of the tab bar and choose Customize.
# Drag the Back/Forward, Stop and Reload buttons onto the navigation toolbar.
# Click the Exit Customize button in the lower right corner when done.
That being said, I should point out that you can reload pages in other ways.
* Right-click any tab and choose Reload.
* Right-click an empty area of the page and choose Reload.
* Press F5.
* Press Ctrl+R (Mac: Command+R).

Accordion navigation bar styling.

Similar Messages

Maybe you are looking for