Add a CSS3 Menu to iWeb

There are two ways to add a menu to iWeb. Either use the default page inspector settings or add a text box with links followed by what most users will do is add a graphic background behind the links. This may be great for most users; however, in either circumstance, you’re not able to add a drop down menu. That is where this tutorial comes in. We’re going to create a CSS3 Menu for iWeb with dropdowns (submenus).

View Demo   Download Source

The menu that we’re going to use includes the great superfish.js, some custom css and a simple HTML markup. You can download the source code above directly from us which includes everything you need. Also for reference, this menu is used on this very website and all of our client websites.

Step 1 – Folder setup & Download

After downloading the source, go ahead and upload the entire folder to your server. The rest of this tutorial will assume nothing was changed with how the folder and files are setup.

What’s included:

[plain]

menu (folder)
— index.html (demo file)
— jquery-1.8.1.min.js (jquery library)
— style.css (menu style sheet)
— superfish.js (jquery file that adds dropdown and animation).

[/plain]

Remember where you placed this folder as you will need to add your absolute URL’s to the HTML markup for all links, JS and CSS files.

[box style=”blue”]Please note that the code I’m showing you is all you will need for the menu to work. The demo, and your downloaded source code, will include additional HTML such as both menu color styles, meta tags and the demo presentation styles.[/box]

Step 2 – HTML, part 1

Now that our folder is uploaded to our server, we can start looking at the HTML markup. Let’s begin with the <head> section and build our HTML.

<!doctype html>
<html lang="en">
<head>
<!-- CSS Files -->
<link rel="stylesheet" href="http://www.YOUR_DOMAIN.COM/menu/style.css">
<!-- JS Files -->
<script src="http://www.YOUR_DOMAIN.COM/menu/jquery-1.8.1.min.js"></script>
<script src="http://www.YOUR_DOMAIN.COM/menu/superfish.js"></script>
<!-- Active the Menu on our page -->
<script type="text/javascript">
jQuery(document).ready(function($) { 
$('ul.sf-menu').superfish();
});  
</script>
</head>

We’re simply linking to the menu style sheet style.css, the jQuery Library jquery-1.8.1.min.js, and the menu jQuery superfish.js. Finally, we’re activating our menu with $('ul.sf-menu').superfish();.

[box style=”yellow”]Remember all links must be the full absolute URL. This will include your domain address followed by the location of the menu files.[/box]

 

Step 3 – HTML, part 2

Add the HTML for the menu (complete menu markup).

<body>
<!-- Menu Container -->
<div id="access" role="navigation">
<div class="access-inner">
<div class="access-content clear">
<!-- The Menu -->
<ul id="primary-menu" class="sf-menu">
<!-- Top Level links -->
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Home</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">About</a></li>
<!-- Drop Down Menu Example -->
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Drop Down</a>
<ul>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<!-- Third Level Drop Down Menu Example -->
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Another Sub Menu</a>
<ul>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
</ul>
</li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
</ul>
</li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Services</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Another Drop Down</a>
<ul>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Another Sub Menu</a>
<ul>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
</ul>
</li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
</ul>
</li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Blog</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Contact</a></li>
</ul>
</div><!-- .access-content (end) -->
</div><!-- .access-inner (end) -->
</div><!-- .access (end) -->				
</body>
</html>

All menu’s are built using an un-ordered list <ul> and our example follows the same principle.

Let’s go over each section.

<!-- Menu Container -->
<div id="access" role="navigation">
<div class="access-inner">
<div class="access-content clear">

The above sets up our menu container. <div id="access" role="navigation"> creates our menu background. <div class="access-inner"> and <div class="access-content clear"> serves as our internal containers holding the menu list.

Next we have our menu system. Each <li> is a menu link and each needs to have  an absolute URL pointing to a webpage. Also notice the target="_parent" for each link. The reason we add this is because in iWeb, our HTML snippet acts as an iframe and any interaction within it will only happen within that iframe. Basically what will happen is the viewer would click a link and the page would open within the HTML snippet instead of the entire browser. To fix this, we add the tag, target=”_parent”, to the link to tell the iframe to open that page on the parent window, in this case your browser.

<!-- The Menu -->
<ul id="primary-menu" class="sf-menu">
<!-- Top Level links -->
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Home</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">About</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Blog</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Contact</a></li>
</ul>

Just like with the JS and CSS files, you need to use a full absolute URL for your pages.

Finally, we need to close our menu containers.

		</div><!-- .access-content (end) -->
</div><!-- .access-inner (end) -->
</div><!-- .access (end) -->				
</body>
</html>

Step 4 – Add Dropdowns / Submenus

To add a dropdown, open one of your <li> links with an additional un-ordered list and then close it.

<ul id="primary-menu" class="sf-menu">
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Home</a></li>
<!-- Drop Down Menu Example -->
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Drop Down</a> <!-- Notice no </li> here -->
<ul>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
<li><a href="http://www.YOUR_DOMAIN.com/page.html" target="_parent">Link</a></li>
</ul>
</li><!-- Close the parent <li> link -->
</ul><!-- Clost the entire menu -->

 

Step 5 – Style the Menu

This menu comes with two default styles, lite and dark. By default, the lite shade or “white” will display. If you would like to use the dark version as shown in the demo, you only need to change one thing. Add the class dark to the main menu div.

<!-- DARK VERSION -->
<div id="access" class="dark" role="navigation">

All of the dark styles can be found towards the bottom of the style.css file.

/* ============================================================
*		Dark Version
*		- Add class "dark" to the #access div
*		<div id="access" class="dark" role="navigation">
* ========================================================= */
/* background */
#access.dark {
background-color: #4b4b4b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b),to(#000000));
background-image: -webkit-linear-gradient(top, #4b4b4b, #000000);
background-image: -moz-linear-gradient(top, #4b4b4b, #000000);
background-image: -o-linear-gradient(top, #4b4b4b, #000000);
background-image: -ms-linear-gradient(top, #4b4b4b, #000000);
background-image: linear-gradient(top, #4b4b4b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#4b4b4b', EndColorStr='#000000');
/* Border Color */
border: 1px solid #111111;
}
/* Top Level Link Color */
#access.dark #primary-menu li a { color: #ccc; }
/* Top level link divider */
#access.dark #primary-menu > li { border-right: solid 1px #555555; }
/* Top level link Hover / Active States */
#access.dark #primary-menu > li > a:hover { background: #111111; }
#access.dark #primary-menu li a.active { background: #111111; }
/* Drop Downs (Children Menu) */
#access.dark #primary-menu ul {
background: #444;
border: 1px solid #111;
-webkit-box-shadow: 0px 0px 5px #333;
-moz-box-shadow: 0px 0px 5px #333;
box-shadow: 0px 0px 5px #333;
}
/* Children Link Color */
#access.dark #primary-menu li li a { color: #ccc;}
/* Chilren Link Hover / Active States */
#access.dark #primary-menu li li a:hover { background: #111111; }
#access.dark #primary-menu li li a.active { background: #111111; }

Simply change the colors and or backgrounds to match your website style. Have fun and play with different color styles and even try to incorporate gradients.

[box style=”blue”] Also included with the style.css file is a list of styles you can use to create a custom version. Just add your background and colors to the css under the “custom” area at the very bottom of the style.css file then add “custom” to the class for the main menu just like you would if using the dark style above. [/box]

Step 6 – Add it to iWeb

When you’re done editing your HTML markup, simply copy and paste it to an iWeb HTML Snippet and hit apply. If you run into any problems, use the comments below.

 

Notes/Hints

  • If you’re adding drop downs to your menu, make sure the HTML snippet is tall enough to show your entire menu.
  • The width of the menu is based on the size of the HTML snippet or by adding additional CSS to the #access div.

 

  1. Sorry for my English. Menu by doing this method. Get infinitely long menu in the example. Could you tell me a little help, I need a menu of four items (home, price list, portfolio and contact information) without loss. If not it will be difficult to send ready code, send the mail: pokoni90@gmail.com

  2. Hi,

    I cannot make the dropdown/submenu works. I am using the following code, which is just what you suggest in your tutorial.

    What I am doing wrong? I tested several times and I do not make it work.

    You can see it on the website.

    Please tell where is my mistake and how to fix it 🙂

    Thanks.

    • Hi Octavio, Looking at your page, it looks like you were able to get the dropdown menu working. Let me know if you’re still having any issues.

      • Hi,

        it is very weird. I am using iWeb.
        When I click “apply” on the html snippet, it suddenly narrow the menu and when I upload like this, it works well, but the menu is not horizontal, its vertical and extremely narrow so the menu is not well displayed online.

        However, when I resize the html snippet and upload it to the server , then it displays nicely online, but the drop down menu just does not work. Why is that? its weird as I just resized the html snippet so it can be well displayed online.

        Another thing that I saw, in a computer it displayed nice when I resize the snippet, but when I browse the page in the iPad, then it does not display correctly. Why is that?

        by the way, I received your email but I made a finger mistake and erased by error, can you send me the email again?

        Thanks,
        Octavio.

  3. Hi,

    please check http://www.centroculturalasiamexico.org.mx/CCAM/Inicio.html

    i have posted 2 copies of the same html snippet, one is resized by dragging the mouse for resizing the menu so it can be displayed well when browsing the website. However, the dropdown submenus does not works.

    The other html snippet its just as it behaves when I apply the “apply” button on the iweb html snippet, it does not display horizontally the menu correctly as it comes very narrow, however, the dropdown submenus works well in here.

    why is this? 🙁

    both are exactly the same code, which is as follows:

    jQuery(document).ready(function($) {
    $(‘ul.sf-menu’).superfish();
    });

    Inicio

    Nosotros
    Instalaciones
    Preguntas_Frecuentes

    <!– Close the parent link –>

    Capacitación
    Salud
    Eventos
    Tienda en Línea
    Contacto



    • When I view that page, the top menu is working fine and the dropdown shows. With your second menu, the one that is “narrow”, you need to extend the HTML snippet wider to allow the menu to become horizontal. The menu adjusts to the parent container, in this case the HTML snippet. Also make sure you are allowing enough height in the HTML snippet for your dropdown menus to display so they don’t get cut off.

      See this image,
      Direct Image Link

      Your HTML snippet is only at 117px’s for the width. So the menu is stacking. Make the HTML snippet wider like your first one.

    • Another thing, if by hitting “Apply” it’s moving back to the narrow size, then you can alter the CSS on the access div and force a width:

      #access {width: 600px; }
      

      OR with inline css inside the HTML snippet.

      OR, by wrapping the entire #access div menu inside another div where this div has an absolute size. This will force the HTML snippet to be at least this size when apply is pressed.

  4. Dear Kerry,

    Wow! then there is something wrong with my computer because the first horizontal menu does not dropdown on my browser ;(

    i will check it out and let you know.

    about the other things, let me try it and I will keep you posted.

    thanks a bunch,

    Octavio.

  5. Hi Kerry,

    now all it works fine, thanks.

    One question, on my own laptop it still does not do the dropdown menu, even when in other computers and devices works very well online.

    I know is something wrong with my MacBook’s browser because it worked normally two times and after the browser just cannot make the dropdown menus…is there any way to fix this? I mean, the code is correct and it works fine, its just my own MacBook browser (safari) and I do not know how to fix it.

    cheers and thanks,
    Octavio.

    • Try resetting/clearing out your browser’s chache and cookies. HTML Snippets are basically iframes so CSS changes are always reflected by simply refreshing the browser window.

  6. I have a problem with the code:
    I wrote it following your instructions, and the outcome was this:

    
    
    
    Jquery(document).ready(function($) {
    $(‘ul.sf-menu’).superfish();
    });
    		
    
    
    Αρχική
    Εταιρεία
    Εκπαιδευτικά Βιωματικά Προγάμματα
    Συνεργασίες
    Δραστηριότητες
    Εκδόσεις
    
    Εταιρεία
    Ταυτότητα
    Ανθρώπινο Δυναμικό
    
    
    
    

    (excuse my greek words, but it’s the greek version of the site, I haven’t constructed the english version yet).
    I copy/paste the code into the html snippet, but what appears is a list (no menu white or black) that represent the links and you can of course select them, but it’s very ugly, and i could have done it with simple text/hyperlink method. What am I doing wrong??? Please help!

    chris

  7. Ooooppps! Instead of showing the code, it actually gave you the final appearance of the menu. That’s what the outcome looks like. do you want me to send you the code somehow?

    • Hi Chris,

      You can use the “code” button right above this comment form to correctly place your HTML/CSS code. Press it once to open the tag, paste your code then press the button again to close it.

      Do you have a live webpage I can view that has your html snippet published on? Most likely the problem is that the CSS file is not being linked correctly (incorrect url). Make sure you’re using an absolute URL to call the css file including the two js files.

      • http://www.chrisomilia.gr/Chrisomilia/ARCHIKE.html
        This is where i have placed the snippet. It’s the one that begins with “Jquery” and has a lot of links in a line.

        Well done for the code, your clear instructions and your prompt reply. I just hope it’ll be able to work for us too.

        chris

        • Your html snippet is missing the css and js files needed for the menu to work. Check out step# 2. copy and past that above your menu links (above the opening body section. In addition, you’re missing the correct menu structure, the ul and li tags along with everything else needed. So look at step #3 as well.

          Again, make sure you add the correct URL’s for the css and two js files.

  8. Thank you Everyone for all your information each problem i had but u guys answered all the q’s b4 i had to ask. Thanks

  9. How do I get rid of all the black dead space on the right?

  10. Dear Kerry,

    I have being using your menu and it works great!. Here is my website http://www.assiamex.com/

    Now, I want to improve the design so I want to make the menu just like the one in here:
    http://www.mommaashleyrose.com/reviews/

    meaning, more transparent so I can post a huge photo on the background and bigger fonts.

    What do I have to do in order to get this new menu?

    Cheers,
    Octavio

    • Hi Octavio,

      You would need to change the CSS of the menu background. Look in the CSS file that comes with it the menu. At the end of the file you could add something like:

      #access { 
      background-image: none;
      background: rgba(0,0,0,.6) ;
      }
      
      • Dear Kerry,

        I should put that code into which file? the style.css? the superfish.js?
        I do not know which file is the one I have to put the code you told me.

        Please be more specific.

        Cheers,
        Octavio.

Comments are closed.