Hyperlinks in Navigation Menu?

I want to have a hyperlink to another website in the navigation menu on my website. How do I do this? I can't seem to find anything.

I know of one way but it is somewhat complex.
1 - create a blank page where you want the link to appear and name it whatever you want.
2 - publish the site with the blank page.
3 - go to your iDisk/Web/Sites/Site name folder and look for the blank page html file. Open it with a text editor and add the following text in front of the </head>tag:
<meta http-equiv="REFRESH" content="0;url=http://www.the-domain-you-want-to-redirect-to.com">.
0 is the number of seconds before the viewer is redirected. The URL would be for the site you want to send the viewer to. This demo page is such a page with a 10 second delay.
As long as you don't republish the page you won't have to go back in and add the code again. What I've done is keep a copy of that page's html file on my HD and if I have to republish the entire site I just replace the new file with the edited one.
This will put the link you want into the iWeb produced navbar and the redirected page will not be displayed. HOWEVER, this will take viewers away from your site with no way to get back except for using the back button in the browser. That is unless you have a link on the other site taking you back to your original site.
I would put a text link on the pages that open the other site in a separate window so the original site is always open for the visitor. But that's just a personal preference.
OT

Similar Messages

  • Not able to edit  text or place any hyperlink in navigation menu in Muse

    I am not able to select/edit text in navigation menu also not able to apply any hyperlink on the text or tabs. It is not letting me do that.  I don't see any hyperlink option even when I select the tab. Is it some kind of bug? I made two sites with Adobe muse and both has same problems. I have wasted so much time in finding the problem. I don't have much time to waste any more. I read other discussions thread in Adobe but didn't find any solution yet. Could you please help me?

    Hello
    The menu items pick the name of the page from your site's plan mode and those text (page names) and their hyperlinks are not editable, unless you change the menu type to manual from the menu options (the blue arrow on the top right corner of the menu).
    Cheers
    Parikshit

  • Modify Hyperlink in Navigation

    With iWeb '06 I used a program called MassReplaceIt to modify two hyperlinks in my navigational menu. This doesn't work in iWeb '08 however since it appears the hyperlink reference has changed in the source html file.
    Does anyone know how to change hyperlink the navigational menu in '08?

    yes, but it is fairly complicated...
    iweb2 nav bar is derived from feed.xml file, on top of that... apple had made it difficult because every nav bar link entriy has in own ID, it can be done but there is a lot of work to get pass it.

  • How can I create a hyperlink directly in the navigation menu using iWeb09?

    I would like to add a URL to an external page in the navigation menu of my website using iWeb09. I have not been able to change the URL automatically generated by iWeb09 for each new page. The best I can do is to select text or an image that I want to link to the external page. I would rather create the hyperlink directly in the navigation menu. Is there a way of doing this?

    Try this...
    Create a blank internal page named "Link" (actually you can name the page whatever you want.) Then in that "Link" page add an HTML Snippet with the following code:
    <script type="text/javascript">
    parent.window.location = "http://www.externalpage.com"; // change this to your own URL
    </script>
    ...Once published, clicking on "Link" in iWeb’s navbar will immediately redirect to the external page. (Thanks to Cyclosaurus for the code).

  • How To Change Hyperlinks And Nav Menu Colors

    I continue to see people stating that it's impossible to change hyperlink colors and navigation menu colors until after you publish your site. This is not true. It's quite easy to update your templates with the colors YOU want and when you update the template, you never have to mess with any post-processing. You make a new page? Your colors are already there.
    I've gone over this before in this thread:
    http://discussions.apple.com/thread.jspa?messageID=3288533&#3288533
    But I'll go over the quick and dirty version here as well. Those who want more detail can post a question and I'll elaborate.
    First, do you know how to get into iWeb's inner folders? You right click or control click on your iWeb icon and select Show Package Contents from the pop-up menu.
    Step 2
    Once you've done that, you'll see a new Finder window that shows a folder called Contents. Open that and then open the next folder Resources. Within Resources there's a folder named Shared. Open the Shared folder.
    You're now looking at your collection of iWeb template files. You'll notice that each template has seven individual page files - each file defines the layout and styles for the page for which its named. This is actually one of the two places where you'll find the data/images that make up your iWeb pages. This location only contains the images. Now I'll show you were to find the data file.
    So you're currently here:
    /Applications/iWeb/Contents/Resources/Shared/
    You want to go here:
    /Applications/iWeb/Contents/Resources/English.lproj
    Now if you speak another language and your Mac's system language is set to the language you speak, substitue English with that language. If your system is set to English regardless of the language you speak, and you use the English templates, then stick with the English folder.
    When you're in the English.lproj folder, you will see seven sub-folders and one file named TemplatesInfo.plist. TemplatesInfo.plist is the file that registers the templates and tells iWeb what you've got in your collection. But we don't care about that file for now. We're after the template data files.
    The seven sub-folders are aptly named for each of the seven page-types as you can see. Open the About Me folder.
    Now you will see an "about me.webtemplate" file for every template you have in your collection. Good job. You've learned something new. Move on to Step 3.
    Step 3
    If you haven't decided yet, now's the time to decide which template you'd like to update. If you're just along for the ride to learn something new, no worries. We won't do anything you can't undo.
    Pick a template file now. Perhaps you chose the White template, or:
    White About Me.webtemplate
    Right click or control click on this file and select Show Package Contents from the pop-up menu. This will launch a new Finder window that displays the contents of the White About Me.webtemplate file.
    You will likely see a handful of different files, but the file you want is the one named Index.xml.gz.
    Index.xml.gz is the brain behind the template. Within this file are all the settings for the page you chose and it's really not hard to find what you want and change it. So let's take a peek.
    Step 4
    Double-click the file Index.xml.gz. This will reveal a new file named Index.xml. You might have to scroll down in your Finder window to see it. Rename Index.xml.gz to Index.xml.gz.backup in case you screw things up, you have your original.
    Now, open Index.xml with TextEdit. Do not open the file with a code editor unless you have already formatted the file.
    When the file opens, you'll notice it's one gigantic jumbled mess of stuff. No worries, we'll straighten that out. All you need to do is a find/replace.
    Find all instances of: ><
    And replace with:
    <
    The line break is important so maybe just copy the lines right out of this post. When you replace all of those, the file will be far more easy to view.
    Assuming you've completed that step. You're basically ready to make your change and test it out! Not hard ey?
    So let's say you want to change your hyperlink color from grey to blue. Search for this string:
    BLDefaultHyperlinkCharacterStyleIdentifier0
    When you find that string, you will see a few lines below it, two lines that look similar to this:
    <sf:fontColor>
    <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r=".8" sfa:g="1" sfa:b="0.4" sfa:a="1"/>
    This is how the template specifies color. It's RGB100. Your Mac came with a program called Art Director's Took Kit and that application can tell you the RGB100 values for any color you want. Tinker with that and you'll have a lot of fun with this.
    So I picked out a nice royal blue for you. The RGB100 values for it are:
    R:0 G:25 B:100
    What you need to do is update the color line to match those values:
    <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r="0" sfa:g=".25" sfa:b="1" sfa:a="1"/>
    Notice that you specify these in terms of a percentage, where 25 became .25 and 100 became 1.
    Step 5
    Save your file. It's time to see your work in action. Open iWeb if it isn't open already and create a new page using the template you've just altered. If you altered the White About Me page, then select that and create the new page.
    It there are hyperlinks already on this page, you should already see that they reflect your new color. If there aren't any hyperlinks, then type some text and create one. You should see your new link color right away!
    Now if you don't see the new color, either you picked the wrong page or you neglected to rename the Index.xml.gz file a few steps back. If you did not rename that file, then it's still in control of your template. Rename it now and try again.
    If you don't like that color, simply swap back to the TextEdit page and change it until you like it - switching back and forth between the file and iWeb to view your changes. Once you're happy, make note of the color you chose and make the change for the remaining six pages in the tempalte you selected. Just be sure to follow the steps for each page you edit. If you fail to see your change, again, check to see that you renamed Index.xml.gz.
    Side Notes
    For the more technical, rather than editing an existing template, you might want to duplicate and rename a template. This essentially creates a brand new one. If you're pretty good within Finder then go for it, just be sure that you duplicate the files in both locations:
    /Applications/iWeb/Contents/Resources/Shared/
    /Applications/iWeb/Contents/Resources/English.lproj/...
    Choose a unique name for the duplicated template and change every single file so that the new name replaces the old one. You would have to register this new template in the TemplatesInfo.plist file as well, but I'm not going to get into that here.
    The thread I referenced at the top has all kinds of search terms to find the other hyperlink styles (rollover and visited) and all the navigation menu styles plus a bunch of other fun stuff.
    Now, it seems long, but that's because I wrote it well. The shortest version of this I've ever written was two sentences, but that was for a UNIX geek and he got it. It's just as easy for you, but I write it out so that anyone can do this, because anyone can. It's just not hard.
    If you have questions about any of the steps, go ahead and ask.

    Good. Okay here's how to apply a background color to your nav bar buttons. For example, my Aerolite template sets the selected page to a black background color. The rollover effect uses a gradient fill. I'll describe both of those here.
    First, here are the navigation menu search terms:
    navbaritem-style-normal-default
    navbaritem-style-rollover-default
    navbaritem-style-selected-default
    navbar-pargraph
    The first three set the button effects and text colors. The last one there sets the font, font size and other paragraph styles.
    To change the selected page button background color, or gradient or image, first search for it using the search term above. Start from the top of the file because there are two instances of those terms, one where you can set the values, the other is only reference to the first and does not allow you to change settings.
    When you find the search term, you might want to insert an empty line above it to help separate it from the rest of the code. You can also insert an empty line below the section. The end of this style ends with:
    </sf:navbar-item-style>
    Be careful not to mix that up with </sf:navbaritem-character-style>
    Now, within this section, you'll find all kinds of settings... stroke, fill, character styles, etc. Notice you can change font color in there. But for this demo, you want to find the section that looks like this:
    <sf:fill>
    <sf:null/>
    </sf:fill>
    I'm assuming you're editing an Apple template that does not already have a fill effect. If it does have one, then your example might not look exactly like that.
    To apply a color fill, change those three lines to these lines:
    <sf:fill>
    <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r="0" sfa:g="0" sfa:b="0" sfa:a="1"/>
    </sf:fill>
    You can see that we've inserted the line that specifies color - something you should be familiar with by now. Here you can specify the color that will become the background of your nav bar button. This example specifies black. Easy no?
    If you would prefer a gradient fill, then replace those three lines with this:
    <sf:fill>
    <sf:angle-gradient sfa:ID="SFRAngleGradient-1111" sf:opacity="1" sf:type="linear" sf:angle="0">
    <sf:stops sfa:ID="NSMutableArray-1111">
    <sf:gradient-stop sfa:ID="SFRGradientStop-1111" sf:fraction="0">
    <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r="0.40" sfa:g="0.40" sfa:b="0.30" sfa:a="1"/>
    </sf:gradient-stop>
    <sf:gradient-stop sfa:ID="SFRGradientStop-2222" sf:fraction="1">
    <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r="0.64" sfa:g="0.66" sfa:b="0.54" sfa:a="1"/>
    </sf:gradient-stop>
    </sf:stops>
    </sf:angle-gradient>
    </sf:fill>
    Now, don't panic Here's what this is. The first line allows you to specify the angle of your gradient. Play with the numbers from 0 to 359 until you have what makes sense for your design.
    Then, you will see two familiar lines again - the lines that allow you to specify color! The first line is the first color of your gradient and the second color is the second color of your gradient. That's all there is to it!
    SECRET: It might be possible to add additional colors, not just two. Do you see the part sf:fraction="0" and sf:fraction="1"? These are gradient stops. I'm willing to bet that if you inserted a thrid gradient stop with a fraction setting of .5, you'd have a three-color gradient!
    <sf:gradient-stop sfa:ID="SFRGradientStop-3333" sf:fraction=".5">
    <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r="0" sfa:g="0.25" sfa:b="4" sfa:a="1"/>
    </sf:gradient-stop>
    I have never tried this - it just occurred to me as I was looking at this code. Big prize for the first person to prove the theory
    NOTE: You will notice that the number 1111 and 2222 are within this code. iWeb XML relies on identification tags here and there. It's nothing you really have to care about except if you insert gradient fills in more than one area. Those numbers need to be unique so if you paste that code in for your selected page button and then paste it again for your rollover buttons, you'll need to update the numbers for the second button. Any numbers are fine. Use 3333 and 4444 for the second set, 5555 and 6666 for the thrid and so on. I often just type 4345781476 - doesn't matter.
    Next lesson will be images.

  • How to create an navigation menu for a onepager

    I need a menu for a onepager but i have no idea how to manage it. Any ideas or solutions?
    Thx for your help and time.

    Do make a navigation menu from the widget,in settings put manual and next choose the tabs for example contact and make a hyperlink to an anchor!

  • Spacing in the Navigation Menu

    Is there any way to space (align & distribute) the text in the Navigation Menu to make it more appealing and less cluttered?

    Yes there is a way to do this, but you have to edit the template XML to do it.
    I've explained how to get into the XML and edit things in a handful of threads. But here's the version at my site. Some of the user comments are helpful.
    http://11mystics.com/blog/2006/10/25/change-iweb-hyperlink-navbar-colors/
    Once you get into the XML, search for the word orientation. That will find the area where you can set the padding between your nav bar entries. Ask questions. No need to beat your head

  • Navigation menu--not centered

    Mac gurus,
    When I transferred my site to iweb 08, many things were different, but the one thing that I can't fix is the navigation menu. After reading some posts, I am nervous about publishing it, but even before I publish it, I would like to CENTER the navigation menu. The text block itself is still centered on the page, but the hyperlinks are now lined up on the left side of the text block.
    I am unable to highlight anything in the text block in order to make the hyperlinks centered.
    Any thoughts?
    Thanks for your help, as always!
    Lara Walker
    Message was edited by: Doug & Lara

    I feel your pain!
    The funny/worst thing is that I have added 2 new pages since I posted the original request for help: one blog and one movie page. The blog page that I added is in a different template and it centered the navigation menu with no problem. The movie page that I added is in the same template as the original website and the navigation menu is un-centered just like the rest of the pages. Bizarre!!! I thought that a new page would not have the same issues as the old pages do upon transfer.
    Lara

  • Why wont my  navigation menu bar navigate to the next page

    Im using DW CS5 and I have assigned links to my navigation menu its hyperlinked but when I click on the button it doesnt navigate to the rest of the pages why is that I am new to DW

    The code is below I just want a simple navigation bar that when I click on biography it takes me to the biography page and so on...I even tried the "href" nothing works I try it in live view and it doesnt work I try it out of live view and it still doesnt work Im using DW CS5 This page was made using a DW template but I changed it around to fit my liking
    <!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>WebIntersect &Bull;Find ElizabethVictoria</title>
    <style type="text/css">
    <!--
    body {
    background: #000;
    margin: 0;
    padding: 0;
    color: #FCCFDD;
    background-color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
    /* ~~ 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;  /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* 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. */
    color: #FCCFDD;
    font-weight: bold;
    text-align: center;
    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;
    color: #000;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color:#808080;
    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: #FCCFDD;
    text-decoration: underline;
    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;
    color: #FCCFDD;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    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: 780px;/* 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: #000;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
    background: #000;
    color: #FCCFDD;
    .sidebar1 {
    float: left;
    width: 20%;
    padding-bottom: 10px;
    background-color: #000;
    background-image: url(images/Untitled-6.gif);
    background-repeat: no-repeat;
    .content {
    padding: 10px 0;
    width: 60%;
    float: left;
    .sidebar2 {
    float: left;
    width: 20%;
    padding: 10px 0;
    background-color: #000;
    background-image: url(images/Untitled-6.gif);
    /* ~~ 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 removes the list marker */
    border-top: 1px solid #666; /* 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 */
    ul.nav li {
    border-bottom: 1px solid #666; /* this creates the button separation */
    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;
    background: #8090AB;
    color: #000;
    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 */
    background: #6F7D94;
    color: #FFF;

  • How to change the color of navigation menu text?

    Hello guys,
    is there any way to change the color of navigation menu text? (Home, Contact About us,etc)
    Thank you,
    Cheers

    To create your own navigation bar, you can use a textbox and use colour fill with any colour you want and then enter the names of your pages in this and create hyperlinks to these pages. The text can then be any colour you want.
    You can also use shapes if you want to and use the shapes to create individual buttons.
    To hide the original nav bar, go to page and it has a couple of boxes with hide nav bar and include in page. Uncheck these and the original nav bar will disappear. You can't delete them however.

  • Drop downs from Navigation Menu?

    I am very new to the Iweb world having recently purchased a MacBook Pro when Bootcamp was introduced. Now that I have been playing on the Mac side of this computer, I am trying to design a new website.
    How do I get pull down selections on the items in the Navigation Menu?
    If I create a button somewhere on the page and hyperlink it to another page, how do I get the button to change colors, etc., like the navigation bar buttons?
    MacBook Pro 2.0   Mac OS X (10.4.6)   Need XP capability
    MacBook Pro 2.0   Mac OS X (10.4.6)   Need XP capability

    How do I get pull down selections on the items in the Navigation Menu?
    You can't do this as part of the iWeb program, you need to do some post publishing coding to get this, I have no idea what you need.
    If I create a button somewhere on the page and hyperlink it to another page, how do I get the button to change colors, etc., like the navigation bar buttons?
    See above
    Will

  • Navigation menu indicator triangle problem

    Hi all,
    the navigation menu of my site looks correct in layout mode:
    It still looks correct in preview mode (notice the triangles' position):
    BUT when I go on to Safari, either by previewing it or uploading to my server, the triangles interfere with the text:
    Is there anything I can do about it? This looks awful!
    Thanks a lot!

    No. But it isn’t in Muse’s hand how a browser renders a certain font. You have to use a sort of "security belt".
    The alternative is, you have a layout problem (different font sizes for example in different menu states; using system fonts … …)

  • Show 2 level hierarchy in Managed Navigation menu(Current Navigation) in SharePoint 2013

    We have enabled Managed Navigation in SharePoint 2013 Publishing Site. Now when a user browses a page we want to show the current page siblings are its parent links in the Managed Navigation. Right now its showing only current page siblings in managed navigation.
    Is there any way to show current page parent links in Managed Navigation menu?
    For example I have a term set enabled for managed navigation with following terms:
    Level1
        Level 1.1
            Level 1.1.1
            Level 1.1.2
            Level 1.1.3
    Level 2
        Level 2.1
            Level 2.1.1
    Level 3
        Level 3.1
    Level 4
        Level 4.1 
    Now if a user is on page Level1.1.1 then Current Navigation should show following hierarchy in using Managed Navigation :
    Level 1.1
        Level 1.1.1 -> This node will be shown as selected
        Level 1.1.2
        Level 1.1.3
    Level 2.1
    Level 3.1
    Level 4.1
    Is the above behaviour possible by doing any out of box configuration or using SharePoint designer?
    Thanks,
    Anna Jhaveri

    Ha i was given the same task by my client but they wanted it to be done in client side rather than creating new user control and inheriting from actual control.
    i used Jquery and css to achieve staticlevel 3+  left navigation in sharepoint 2013. first of all let me explain the structure i had created.
    HR department
     -->Level 1
    ---->Level 1.1
    ------>Level 1.1.1
    ------>Level 1.1.2
    -->Level 1.2
     (same as above structure)
    all i did was setting up the staticlevel ="2" and dynamiclevel="3"
    so this would make left navigation with two level  and remaining of its sub sites as flyouts
    Part-1:
    so i used Js to convert all the flyout(dynamic class ) to static $(function(){  
    $("ul.dynamic").removeClass('dynamic').addClass('static');$(".dynamic").removeClass('dynamic').addClass('static');  $(".static").removeClass('dynamic-children'); $("#zz12_RootAspMenu > li:nth-child(n) > ul").removeClass('dynamic-children');
    $("leftnavigation ID"> li:nth-child(n) > ul > li.static > ul").removeClass('dynamic-children');              $("leftnavigation ID" > li:nth-child(n) > ul > li.static > ul > li:nth-child(n) > ul").removeClass('dynamic-children')
    $(".ms-navedit-flyoutArrow").removeClass('dynamic-children').removeClass('ms-navedit-flyoutArrow');
    by using this script all the dynamic classes get convert to static. after getting rid of classes call "dynamic" and "dynamic-children"
    second part :
    now we have convert all the dynamic level to static (just look wise) but functionally  its behaviors is like flyout menu items.so the following js adds the static behavior classes so it just functions like static menu
    $(function()
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path)
    $("left nav ID" > li > ul > li.static.selected > ul > li > a").each(function () {
    var href = $(this).attr('href');
    if (path.substring(0, href.length) === href)
    $(this).closest('li').addClass('selected');
    $(this).removeClass('ms-core-listMenu-selected').addClass('selected').addClass('ms-core-listMenu-selected');
    else
    $(this).closest('li').removeClass('selected');
    $(this).removeClass('selected').removeClass('ms-core-listMenu-selected');
    How above code works:
    it  takes the url path of current page and compare it with the all the anchor elements href ,so when it finds the match it would go insert the static level class  like "selected" in the <li> and "ms-core-listMenu-selected" in the <a>
    tag so  they function like static.
    so i have done it for 4 levels so i had to put one more function as shown above to target and read <a> tag href values for 4th level and compare it with current page url.
    i didn't explain in detail in here, i'll be writing up again on this issue on  my blog with screen captures soon.
    Till then you can leave comments and questions.
    Disadvantage :this doest work if you have anything listed other then Subsites(pages,list,libraries) in left navigation.

  • Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

    Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
    The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
    I realize the images are not ideally sized - I'll fix those once I get the pages to function.  Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
    The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
    I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
    I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
    Thanks in advance.
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reardan Area Chamber of Commerce</title>
    <meta name="description" content="home page for Reardan Area Chamber of Commerce" />
    <meta name="keywords" content="Reardan WA, chamber of commerce" </>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript">  </script>
    <script type="text/xml">
    </script>
    <style type="text/css">
                                  #slideshow { 
                                      padding: 10px;
                                            margin:0; 
                                  #slideshow-caption{
                                            padding:0;
                                            margin:0;
                                  #slideshow img, #slideshow div { 
                                      padding: 10px;
                                      background-color: #EEE;
                                      margin: 0;
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background: #004B8D;
              margin: 0;
              padding: 0;
              color: #000;
    /* ~~ 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;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
               /* 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. */
    .left
    position:absolute;
    left:0px;
    .center
    margin:auto;
    width:95%;
    .box
              position:relative;
              left:-90px;
              width:950px;
              height:350px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              z-index:1000;
    .slide{
        position:absolute;
    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: #42413C;
              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: #6E6C64;
              text-decoration: underline;
    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 fixed width container surrounds the other divs~~ */
    .container {
              width: 960px;
              min-height:900px;
              padding:5px 0px 0px 0px;
              background: #E8F8FF;
              margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
              background: #E8F8FF;
              padding:10px 5px 0px 5px;
    .sidebar1 {
              float: left;
              width: 225px;
              margin: 60px;
              color: #FFFF0D;
              background: #595FFF;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
        z-index:-1;
    .sidebar2 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:2;
    .sidebar3 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:3;
    .content {
              padding: 0px 0px 0px 0px;
              width: 780px;
              float: left;
              background: #E8F8FF;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0px 15px 5px 10px; /* 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 removes the list marker */
              border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
              margin-bottom: 50px; /* this creates the space between the navigation on the content below */
              font: Arial Black, Verdana, , Helvetica, sans-serif;
              font-size:1.3em;
              font-weight:bold;
              z-index:2;
    ul.nav li {
              border-bottom: 0px solid #FFFF66; /* this creates the button separation */
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
              padding: 3px 0px 5px 0px;
              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. */
              width: 185px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
              text-decoration: none;
              color: #FFFF0D;
              background: #595FFF;
    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 */
              background: #595FFF;
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
              color: #FFFFFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background:  #595FFF;
              color: #FFFF0D;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ 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 #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->
      <a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
      <p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="about.html">About Us</a></li>
          <li><a href="history.html">Reardan History</a></li>
          <li><a href="activities.html">Activities</a></li>
          <li><a href="business.html">Business<br />
            Directory</a></li>
          <li><a href="about.html">Join the<br />
            Chamber</a></li>
           <li><a href="links.html">Links<br />
      <span style="font-size: 85%">Tourism</span><br />
          </a></li>
        </ul>
         <!-- end .sidebar1 --></div>
    <br />
    <br />
    <br />
    <br />
    <div class="box" +"slide">
      <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
                               slideshowAddCaption=true;
    $(window).load(function() {
      $('#slideshow').cycle({
                        after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'blindX',// name of transition effect
                        pause:                              false,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              100,  // speed of the transition (any valid fx speed value)
                        sync:                              true,     // true if in/out transitions should occur simultaneously
                        timeout:                    5000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              true,
                        height:                       '300px',
                        width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshowOnCycleAfter() {
              if (slideshowAddCaption==true){
                                  $('#slideshow-caption').html(this.title);
    // EndOAWidget_Instance_2559022
      </script>
      <div id="slideshow">
        <!--All elements inside this will become slides-->
        <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
        <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
        <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
      <!--It is safe to delete this if captions are disabled-->
      <div id="slideshow-caption"></div></div>
    <div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
    Local News item
    <br />
    Another New item</p>
      <p align="center">lots of news this week<br />
        <br />
        <br />
        <br />
      </p>
    </div>
    <div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
      <div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
    <div class="content"><br />
    <br />
    </div>
    <div class="footer">
            <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
              <span style="font-size: x-small">[email protected]  - 509.796.2102</span><br />
            </p>
            <!-- end .footer -->
    </div></body>
    </html>

    If you DO want the slideshow overlaping the navigation try the below css:
    .sidebar1 {
        float: left;
        width: 225px;
        margin: 60px 0px 60px 60px;
        color: #FFFF0D;
        background: #595FFF;
        border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
    .box {
    float: left;
    margin-left:-60px;
    width:700px;
    height:350px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;

  • Please help me move pictures freely, and get a logical navigation menu

    I am a serious newbie to iWeb. As best I can tell, I'm in iWeb 1.1.1 (so what's that? '08, '09?) I'm in OS 10.5.7 if that helps. No recent iLife. Since attempting iWeb, I have been reading and trying my best to follow the tutorial but I'm impatient because I'm not a newbie in other related areas (like graphic design, video, photoshop, iPhoto, etc.), and get frustrated with what seem like simple tasks. I'm not trying to do anything fancy. But I am getting all tripped up with two things. 1) I can't get rid of the grids or the photos in the templates unless I drop my own photos into them. Once I do, I cannot move them around freely. I added a gif animation (it took it as a QT movie and after publishing played it as a animated gif, which was great) but the one or two pictures I have next to it I simply cannot do anything with except move within the right angles of the blue grid from the template that is still there. I tried the different frame styles but none of them do anything different. I am looking for something that allows me freeform movement of the photos I am dragging in. Too much to ask? And to get rid of the grids, or at least not be bound by their definitions. I'd rather not use them at all but didn't see an option for that.
    2) How do I change the page that has accidentally become my navigation menu. Before I understood this, I apparently created a page that is now my navigation menu. I want to get rid of that page altogether. But it has a star in front of it. None of the others do. Can I just create something called "Navigation Menu" and let it be just that. And build my sites and pages under that?
    Thanks for patience and help.
    nÔÔdle--hëad Per-rrr-plexed

    You should post in the forum for iWeb 1, iWeb (Previous to iWeb '08) which will have users who are more familiar with the older version.
    OT

Maybe you are looking for

  • Screen color changing random - yoga 3 pro

    hi guys had a problem for a few days now, sometimes, out of nothing, the screen color turns yellowish....like a warm color....i right click in the home screen, personalize, display, calibrate color, the template for color calibration appears, i enter

  • Firewall/nat/routing issue

    I am not able to setup a firwall box which will transmit internet packets from internal network to the internet and otherway. Could you please guide me what i am missing here and where I am going wrong? [internet] ----(public ip)---[cable modem]( 192

  • Problem with COM port opening

    I made an application using COM port to dialog with a microcontroleur and i have some troubles with the opening of the port. i developed it under window XP pro and labview 6.1 and i have no problem when i launch my application on an XP PC having labv

  • "MULTIVALUE" in reports

    Post Author: Adrin CA Forum: WebIntelligence Reporting On Web Intelligence report I have encountered this problem. In some queries, if there is more than one value in database for some of the fields of query, the report can't display all values in di

  • I need to export my bookmarks but the "Organize bookmarks" is not available in the menu anymore. How can I proceed?

    I have FireFox 7.0.1 (italian), I need to save my bookmarks not to have to retype them while migrating to the new OS. In yor help pages it is stated that I can save bookmarks going under BookMarks menu, selecting Organiza bookmarks- and saving them a