Creating nav bars using layers

I am trying to create a nav bar on the left hand side of a web page.
I have created it how GoLive CS2 seems to suggest, so each option that will appear in the nav bar has been created as a seperate layer. I have positioned these correctly, then added actions to each of these so things will happen when the user mouse clicks on an option.
It has 5 main links in at the top level and each of these have sub-sections. At the moment when the user clicks one of these options the sub sections appear beneath it and the other options that were previously in the way slide down to allow these sub-sections to appear.
The issue is when these sub-sections need to open out into sub-sub-sections. I have succesfully worked out how to get these to ShowHide on a mouse click but I cannot, for the life of me, work out how to make the options below it to then slide further down to accomodate the appearance of these sub-sub-sections, despite managing to make it happen for the sub-sections.
Perhaps because they have already slid down already and now cannot do it again? Surely not?!
Anyways, I hope that is all clear. If no-one replies I shall assume not and try a a re-post.
I would be grateful of some help.
Thanks!
Simon

ok, I have put the nav bar up at this address http://www.simonpeel.co.uk/leftnav/leftnav.html
Obviously, 'View Source' to see the code.
To re-create another problem I would like a solution to, do this:
Click 'Come & See' and then click 'Sunday'. Then click 'Welcome' and then re-click 'Come & See' and you will see it does not revert back to the original state but keeps the spaces where the sub-sub-sections are. I may be able to work this problem out myself but I lost patience and thought if someone was going to look at it anyway, you could save me some hassle!
Many thanks in anticipation,
Simon
p.s. feel free to take a look at my site by deleting
/leftnav/leftnav.html! I'm quite proud of it, although there are some dead links lurking around.

Similar Messages

  • Master Sheets - Created Nav Bar is Behind Assets (back layer?)

    Is there a way to get assets created in the Master Sheet to be the top layer?
    Creating a web page with the horizontal nav bar across the top.
    I used the template and built off of that.  When I finished with the nav bar in the Master Sheet, I started to add content to my normal sheets.  The nav bar, and the drop down navigation I created are behind any assets added to the slides.
    I included a mock up of another nav bar I created.  The "Home" text asset added to Sheet 1 is covering my nav bar I created in the Master Sheet.  The nav bar is in the activated state for the "Home" button.  I am using a layer stack and mouse events to create the drop down and button select effect.

    Hello,
    I've spoken with the development team and they've explained this here:
    A master sheet can be used as a front master and a back master. It  is even possible to have a back and front master. You can select the  masters in the properties of the sheet - by default only a back master  is used.
    Thanks again for your question!
    Sarah
    Sarah
    Forum Moderator

  • Help with Nav Bar using Action Script 3

    I am a flash NOOB to say the least.  Trying to teach myself.  Thank God for YouTube! LOL!  Anyway, I have build a Nav Bar for a site that has a sliding bar on the bottom of it that follows the mouse.  The problem with this nav bar is that when you change pages inside the site, the slider resets back to position X/Y = 0 and you really don't know what page you are on for sure without me having to identify each page in the page body itself.
    Does anyone know of a way using action script to have the URL of the page sent to flash and in turn use that URL to set the X and Y position of the slider to the appropriate X and Y of the button on the Nav Bar for the page the user is on?
    I have heard of using flash.external.ExternalInterface but now for sure how this really works nor if I can assign it to a variable for reference inside the action script.
    Any help would be appreciated greatly!!

    The Flash Nav Bar is at the top of each page.  But yes, when you click a button inside the flash nav bar it takes you away from your current page and loads a new one.  I am trying to tell the swf file which page it is on so I can set the X and Y position of the slider.
    You will have to excuse me if I am so noob that I loose any of your replies to this as just as Flash is new to me, so is the lingo.
    Thank you for your help.  I will research FlashVar but if you have any other ideas then I am open to them.

  • Can i use Fireworks created Nav Bar in iWeb?

    I am new to iweb and want to have a specific layout for my website. I don't want any of the templates, so I used fireworks to create a Navigation bar with buttons that have prelinked to the "standard" html, i.e. home.html, photos.html.
    can i use this with iweb? how? if not, and i just use each button indvidually, can i create a text description of the button (so webcrawlers can see my navigation bar)?
    thanks for any help i can get.

    Two pages for you to preview for your answer:
    Web Gallery:
    http://www.apple.com/dotmac/webgallery.html
    AND
    iPhoto .Mac Web Gallery:
    http://www.apple.com/ilife/iphoto/#webgallery
    As I perused the two sites quickly, I didn't see their connection, but you may see something different!
    Paula

  • I made a text nav bar using CSS, and I am trying to get downdown menu's from it?

    Hello,
    I am working through a tutorial book and just created a text navbar with CSS, which I have never done before. Basically it was an Unordered list and then I used the float property right to make them go next to each other. Then created a few more styles to give them padding etc.
    I thought I could go after each list item and now add a group of unordered lists items to pop up when I mouse over., but whatever I try in a new CSS style doesn't work to put them underneath.
    Here is the code  and the style sheet code thus far, and I have colored in blue, the items I wanted to have dropdown menu's come from. Can anyone help me or guide me to where I might find this info? I want to get to the next level, but this is as far as the book goes.
    thanks!
    babs
    @charset "UTF-8";
    body {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: small;
        color: #333;
        background-color: #739112;
        text-align: center;
        #container {
        background-color: #FFF;
        width: 840px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        text-align: left;
        background-image: url(images/container_bg.gif);
        background-repeat: repeat-y;
    #header {
        height:80px;
        z-index:1;
        background-color: #9fcc41;
        background-image: url(images/veggies.jpg);
        background-repeat: no-repeat;
        background-position: right;
    #header img {
        margin-top: 20px;
        margin-left: 15px;
    dl {
        color: #000;
        font-size: medium;
        margin-left: 15px;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-weight: bold;
    dd {
        font-size: small;
        margin-bottom: 10px;
        font-weight: normal;
        margin-right: 10px;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        margin-left: 5px;
        #navigation {
        background-color: #88b036;
        height: 36px;
        width: 100%;
        #footer {
        background-color: #ccc;
        clear: both;
        height: 1%;
        #main {
        float: left;
        width: 520px;
        padding-left: 20px;
    #navigation ul ul {
        float: none;
    #container #navigation ul ul {
        float: none;
        clear: none;
        #sidebar {
        float: right;
        width: 270px;
        background-color: #c8d9bc;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: #060;
        #navigation ul li {
        float: left;
        list-style-type: none;
        #navigation ul li a {
        text-decoration: none;
        color: #FFF;
        padding-top: 8px;
        padding-right: 15px;
        padding-bottom: 8px;
        padding-left: 15px;
        display: block;
        #navigation ul {
        margin: 0px;
        padding: 0px;
        #navigation a:hover {
        background-color: #9fcc41;
    <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns=&quot;http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
        <title>OrganicUtopia Home Page</title>
        <style type=&quot;text/css&quot;>
        </style>
        <link href=&quot;styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; />
        </head>
    <body>
    <div id="container">
      <div id=&quot;header&quot;><img src=&quot;images/ou_logo.gif&quot; width=&quot;210&quot; height=&quot;41&quot; /></div>
      <div id="navigation">
        <ul>
         <li><a href=&quot;#&quot;>Home</a></li>
          <li><a href=&quot;#&quot;>About US</a></li>
          <li><a href=&quot;#&quot;>Products</a></li>
          <li><a href=&quot;#&quot;>Services</a></li>
          <li><a href=&quot;#&quot;>Contact</a></li>
        </ul>
      </div>
      <div id="main">
        <h1 >Welcome to organic utopia</h1>
        <p>There's big news at OrganicUtopia this month! We've expanded to include 2 new lines of body and earth-friendly products. We now carry bio-degradeable furniture - imagine a couch you can leave on the street that will slowly decompose back into Mother Earth! We also have added recyclable shopping bags, which eliminate the need for the age-old question &quot;paper or plastic?&quot;. These bags are tough, stylish, and eco-friendly!</p>
        <h1 >What do we do?</h1>
        <p> We've got everything from healthy<a href=&quot;#&quot;> lifestyle foods</a> and <a href=&quot;#&quot;>organic gourmet products</a> to other lifestyle products. We also have a full line of eco-friendly furniture, clothes, candles and home furnishings.</p>
        <h1>One stop shoppingOne stop shopping</h1>
        <p>You can find it all here, and our online store makes it easy to order! Pick from carefully selected food, lifestyle and home products and add them to your shopping bag, all from the convenience of home. We even offer free shipping on many items, or save you big dollars by shipping items together.</p>
    <p>You can find it all here, and our online store makes it easy to order! Pick from carefully selected food, lifestyle and home products and add them to your shopping bag, all from the convenience of home. We even offer free shipping on many items, or save you big dollars by shipping items together.</p>
        <h1>Member benefits</h1>
        <p>Anybody can shop at Organic Utopia, members however, enjoy certain benefits. For only $150 a year you will recieve a 20% discount on anything in the store. Additionally, you can take advantage of ordering bulk items when you become a member. There's really no reason *not* to join! <a href=&quot;#&quot;>Learn more.</a></p>
      </div>
      <div id="sidebar">
        <dl>
          <dt>December 20, 2012</dt>
          <dd>Organic Utopia's blowout sale. Lots of great deals on clothing, food, green accessories and more. Big saviings can be found everywhere!</dd>
          <dt>December 21, 2012</dt>
          <dd> All Organic Utopia stores will be closed to non-members as we prepare for the first annual World Age exhibition. Members are encouraged to come to your local store and help prepare for this once-in-a-lifetime event.</dd>
          <dt>December 22, 2012</dt>
          <dd> Community Green up. Volunteer to help clean up your community's neighborhood. </dd>
        </dl>
      </div>
      <div id="footer">Content for  id "footer" Goes Here</div>
    </div>
    </body>
    </html>

    Perhaps it would be helpful for you to view the page source code of this page
    http://www.alanwork.com/
    As you can see, the submenu code links are immediately below the top level code, and are
    wrapped in their own  <UL> </UL> tag pairs.
    Hope that helps

  • Over state for nav bar using liquid positioning

    Hi everyone, I have a navigation menu in a website I'm making
    that uses liquid positioning. I was wondering what the best
    technique for adding an "over" state (rollover) to my nav menu is.
    I was thinking about making the nav menu a background image for one
    of my divs, then placing an ap div over that with my rollover
    images inside, placing image maps on top of those, and then doing a
    show/hide behavior for each image. This is not working out too well
    and I'm sure there is an easier way. Also, I am new at this and am
    having trouble understanding how to center objects using a liquid
    layout. Can someone please help me?

    Why not use the menu widget? Image maps are a pain.
    I must admit I don't understand "liquid positioning."

  • How to create menu bar in jsp page using struts-tles

    I have started working with struts-tiles. I want to create menu bar using struts-tiles. please guide me.

    I've done this very recently. In fact, tiles has very little to do with the menu itself.
    In your layout, define where you want the menu to go.
    <tiles:insert attribute="menu" />Now, in the actual file, create your menu structure. This part is up to you. I've used http://www.brainjar.com/ as a starting point for the client side actions.
    On my menu page, I call a method on a custom object that returns the menu bar object. Currently, I'm working on putting this menu into some sort of cached object so it doesn't have to rebuild it on every page request.
    Perhaps I've misread your post and you're looking to use tiles, in and of itself, to simulate menus? Otherwise, I hope my post helps.

  • Autorotation w/ Tab and Nav Bars

    I am having a problem with views not being properly resized after autorotation. My app has a tab bar where one of the tabs is nav controller. I have the autoresize masks to maintain edge distances and use flexible width/height.
    Starting in portrait, if I switch to the tab with the nav controller and then rotate the device to landscape, the content view does not resize properly. Once the rotation animation stops, the top of the content view ends up obscured by the nav bar (it looks like the content view is being sized to fit between the top screen edge and the top of the tab bar rather than fitting between the bottom of the nav bar and top of the tab bar). The horizontal dimension updates as expected.
    If I start in landscape and then switch over to the tab with the nav controller, the content view does correctly sit between the nav and tab bars.
    I dumped the frame/bounds of the content to see if something jumped out at me and am only more confused. In both cases, the frame and bounds of the content view are origin at (0, 0), width 480, height 239? I was expecting to see the origin offset in the first case where things don't resize correctly.
    Not sure what I am doing wrong...
    tw

    Hello,
    The answer is in the code. Can you post a link?
    As a guess, the fix might be in setting the cell the
    navigation is in to
    vertical-align: top;
    In design view, click in the cell that contains the
    navigation.
    Select the <td> tag in the tag bar at the bottom of the
    design window.
    The entire column containing the navigation should highlight.
    In the properties window, select "Top" from the "vert"
    dropdown choices.
    In code view, find the cell containing the navigation.
    Change the opening <td> to:
    <td valign="top">
    It really depends on how you built it. This could also be
    caused by merged
    table rows.
    Take care,
    Tim
    "kahnman7" <[email protected]> wrote in
    message
    news:gnkape$kb9$[email protected]..
    > Hi,
    >
    > REWARD OFFERED FOR THE RIGHT ANSWER THAT I CAN ACTUALLY
    IMPLEMENT! :-)
    >
    > Because DW doesn't let me place more than one "official"
    nav bar on a
    > page, I
    > have created nav bars for sub-sections of my site by
    creating a simple
    > single-column table and placing rollover images in it
    for the buttons.
    >
    > I have this nav bar placed on the left-hand side of my
    pages. Each page is
    > a
    > two-column table -- nav bars in the left-hand column,
    content in the
    > right-hand
    > column. So basically nested within the left-hand column
    is my single
    > column nav
    > bar.
    >
    > When the page content in the right-hand column is long,
    the nav bar in the
    > left-hand column drops down to near the bottom of the
    page, but I want it
    > to
    > remain at the top. How can I make it remain in this
    fixed location other
    > than
    > inserting lots of carriage returns in the left column? I
    would prefer a
    > more
    > proper, dare I say "elegant," solution for it to remain
    in place.
    >
    > Thanks! And the reward... a copy of my rock band's new
    CD, due out in 3
    > weeks.
    > It's great stuff produced by an industry legend. :-)
    >
    > Scott
    >
    >
    >

  • How to use CSS to create horizontal nav bar in Dreamweaver CS6

    How to use CSS to create horizontal nav bar in Dreamweaver CS6

    One of the ways to do it is this: Tryit Editor v1.9
    You can also use floats to get something to the same effect.

  • Creating a hero photo slider using jquery but the nav bar sub menus go behind the hero div tag

    Dropbox - Butler Lawyers
    Hello Everyone
    I m designing a site with a hero photo slider using jquery. My problem is, the nav bar submenus are going behind the photo slider  so you can't see the  Legal Services tab sub menus. I have provided a dropbox link to the entire project. I m working on the file entitled index.html. Any thoughts on how to fix the problem???
    Thank you in advance
    Paul

    Hi Paul
    Sounds like a z-index problem.
    We really need to see ALL your files to solve your issue quickly and accurately without a lot of guessing and questions back-and-forth.
    Just rename a copy of your problem page  (such as "test.html")  and upload it to your server (with any associated files) in whatever folder the original page was located, and simply post a link in the Forum and tell us your problem.
    This saves you having to cut and paste miles of code into the Forum for the page and all the dependent CSS, JS etc. files.and saves us from having to recreate all your files, find your images and then repair your code and test the solution for you.
    I trust this is helpful.

  • Creating in DW a dropdown menu/navi-bar from png's created in Illustrator

    Hey All!
    I'm new to Dreamweaver (currently CS5.5) and trying to create webpages for a university-researched based project site.
    I'm totally lost as to how to create dropdown menus from buttons and dropdown menus I've created in Illustrator (CS4). I have made the buttons not particularly custom apart from the appearance. There seems to be no way to import from Illustrator unless using slices which only create html linkpages and/or CSS layers (I have no clue on that).
    I want to do a number of things:
    1. Have a navigation bar
    2. When the cursor hovers over the tab it inverts and
    (for example) the 'Introduction' tab drop-slides down to show the options.
    3. When the cursor hovers over an option the colour changes from light grey to black (?...)
    It's a tall order I know, but I've been searching on the web for the last 4 hours and have had no luck in finding what I'm looking for. It is possible isn't it? Surely at this point its possible to do anything with the adobe software?!
    Many thanks and best wishes,
    James MLM
    p.s. If you need to see an attachment of the exampled .pngs let me know. Cheers

    Thank you Murray *ACP* and Nancy O. for your help.
    I can neither afford to buy such software and nor want to sadly, if I could I would feel I'd learned nothing and have another program do all of the "thrashing" out for me . I'd like to know how it all works, since I'm very new to the whole website design industry (dreamweaver, joomla etc) and I'm keen to learn as much as possible.
    Don't take this the wrong way, but the Spry menu bars are fine for an everyday kind of put-together website, however this website is for an academic institution's project and I'm trying my darndest to make sure it doesn't resemble or fall into the category of excessive substance over style. It's a website meant for anyone to use, from the academics who understand the project to the anybody-joe-josie who can use it to learn from the research and products of the project. User-friendly as possible for an academic project. Harder than you think, unless you have seen any academic websites that have all the understandings of layout, clear project description and understanding and product.
    Surely there is a way of creating these customisable dropmenus and the masters of said software such as yourselves might find it too time-consuming to give me an idea of where to start, it's cool, I get it.
    On paper it's simple; create dropdown menus (slide smoothly) for external links etc, using the .pngs I've designed in Illustrator to give as much aesthetic interaction as possible, that's what I've been assigned to do to replace the quickly-slapped together website there was before. I can't show you the pages I've created from Illustrator using Slices (not a very effective option) since it's under the institution "law" of data protection until ready. I can only provide snippets and the previous website which is being completely updated to meet a brief of "smart, slick, simple".
    My definition of that is to have the style of smart, slick and simple whilst having a little more depth and accessibility. All things wonderful get better and evermore intriguing the closer you look.
    Thank you again for your help, I'm still learning but I put the hours into something that needs full attention. Plus to whinge (sorry) I'm not being paid, and it's a 3 month schedule. "Tene lupum auribus".
    Many thanks and best wishes,
    James MLM

  • I have created a site with iWeb. I have replaced the iWeb Nav bar with a vertical one I made myself. Problem is, my top button disables itself if it overlaps into the "hidden" nav bar area. I can cmd click and drag it into this area, but then all the rest

    I have created a site with iWeb. I have replaced the iWeb Nav bar with a vertical one I made myself. Problem is, my top button disables itself (and the animation doesn't work) if it overlaps into the "hidden" nav bar area (indicated by a blue rectangle). I can cmd click and drag it into this area, but then all the rest of my site is pushed down the page. Don't know what to do about this. I don't know how to bring the rest of the page up without dragging it also into the designated nav bar area. Also, by doing this, is it affecting my site in ant way? see my site here at www.steveburrowsimages.com
    The home page is with it all draged into the nav bar area and the about page is with is outside the nav bar area (notice that the top button does not animate or work as a button.
    Getting confused here. Anyone got any ideas?

    Well, you made a good start with SEO by getting rid of the iWeb default navigation since it doesn't help the spiders and, out there in the real world, there are more people than you would think with javascript turned off in their browsers.
    One of the downsides of iWeb is that it doesn't allow for the alt attribute in the img tag. Its well worth adding these to give you extra keywords even if you have captioned all your images. Use iWeb SEO Tool for this...
    http://www.iwebformusicians.com/Search-Engine-Optimization/Tags.html
    iWeb, just like most drag and drop software, creates a huge amount of code which causes the pages to load slowly in the browser. Running you files through an optimizer will help to reduce this problem and further reduce the size of image files even beyond the initial optimization you do before loading them into iWeb...
    http://www.iwebformusicians.com/Search-Engine-Optimization/Optimize.html

  • Using the nav bar to link to another page.

    It is possible to use the nave bar to link to another page such as a blog?
    Example:
    Welcome About Me My Photos Blog (linked to external blog such as blogger)

    If you want the link to the external page to appear in the default navbar then do the following:
    1 - create a blank page and name it the way you want it in the navbar.
    2 - add an HTML Snippet to that page with the following code in it:
    <script type="text/javascript">
    parent.window.location = "URL TO THE EXTERNAL PAGE"; </script>
    What this does is automatically redirect the viewer to the external page when the link in the navbar is clicked on.
    My Demo Sites are setup this way. The Contents page for each site is redirected to a separate Contents site which contains the index of all the pages in the three demo sites. That way I only have to change the index on the Contents site instead of doing it for each site individually.
    If you want the other page to open in a new window you'll have to create a separate text based hyperlink and use the Inspector/Link pane to link the text to it and check the open in new window option. If you need to have that in the navbar you can create a texbased navbar, hide the default one and set your links as needed in the Inspector/Link pane. This is a demo page of a Text Based Navbar.
    OT
    Message was edited by: Old Toad

  • Help creating drop down nav bar

    Hi. Can anyone pls advise what software I use to create a
    drop down nav bar like that which is at the top of the adobe
    homepage. I have Dreamweaver MX, Flash MX 2004 and Fireworks MX.
    Will any of these do the job or do I need something else?

    Try the menu systems from Project Seven.
    http://www.projectseven.com
    alex
    tonyvw wrote:
    > Hi. Can someone pls advise me which software to use/to
    learn to create a drop
    > down navigation bar at top of my web page, like the one
    at top of adobe's home
    > page. I have Fireworks MX, Flash MX and Dreamweaver MX.
    >

  • Slicing an image to be used as a nav bar for html email

    The html email that I've created renders as designed in most email clients.  It doesn't in Outlook 2007.  It was suggested that I slice an image for the nav bar so it displays horizontally as designed instead of vertically.
    It's been a long time since I used slicing images in Photoshop.  It doesn't appear that Image Ready is there anymore.  I use Photoshop CS3.  Is there a straightforward document that could walk me through the steps to accomplish this?  Using the Photoshop "help" confuses the heck out of me and when I asked this question in the Photoshop forum, many looked at it but I've had no responses.  Or could it be done in Dreamweaver somehow?
    The web version of the html email is:  http://www.theshimogaproject.com/email/riverrun-guests-email.html

    You can't use DW to slice an image. Do you have Fireworks? It's really easy to do it in Fireworks, that's what I would use. If you need to use PhotoShop, a quick Google search, "slicing images in photoshop," return plenty of tutorials that you can choose from.

Maybe you are looking for