/*
  CSS generated via the Multi-level Navigation Plugin ... http://pixopoint.com/multi-level-navigation/

  If you would like a similar menu for your own site, then please try the PixoPoint Web Development
  CSS generator for creating flyout, dropdown and horizontal slider menus ... http://pixopoint.com/suckerfish_css/
*/

* Forum
    * Blog
    * Contact
    * About
    * Home

Pixo Point

Welcome to PixoPoint Web Development, experts in developing effective, future-proof web designs.

We specialise in the design, coding and implementation of large and small scale websites. Particular areas of expertise include menu navigation and software integration.

Our Dropdown Menu Generator and WordPress dropdown menu plugin are used by many professional web designers to create high quality navigation systems.

Seamless integration of blogs, galleries and forums are important to the professionalism of any website. We offer very competitive rates for custom integrations of various softwares with existing websites.

For further information, or to request pricing information, please visit our contact page.
Premium Support

Premium support is available for our plugins, CSS generator and themes.

Premium Support information »
Donate

If you would like to help support our plugin and theme development but don't have a use for our premium support option, feel free to leave us a donation.
Advertising

    * Blog
          o Dropdown Plugin
          o Aqua Vaccinium
          o Hellish Simplicity
          o Dropdown Generator
          o Simple CMS Plugin
          o Simple CMS Theme
          o Ice Edge WordPress Theme
    * Stuff
          o Another Level
                + Next Level
                      # Test
                      # Test
                      # Test
                      # Test
                + Test
                + Test
                + Last Level
                      # Current page item
                      # Test
                      # Test
                      # Test
                      # Test
                + Test
          o Test
          o Test
          o Test
    * Forum
          o Themes
          o Dropdown menus
          o Simple CMS Plugin

Multi-level menu CSS generator

Welcome to the Suckerfish multi-level CSS Generator. By modifying the options below, you can generate a restyled Suckerfish dropdown navigation above. You can copy and paste the CSS generated from the box further down the page.

Note: You need to upgrade to our premium service to modify some features.

Premade Designs:

Navigational type:

Premium users only
(show premium options »)

WordPress Optomised:

Click Here to Pick up the color Current Page Item Background Colour:

enter a valid HEX colour value

Click Here to Pick up the color Current Page Parent/Ancestor Background Colour:

enter a valid HEX colour value

Click Here to Pick up the color Current Page Item Indicator Colour:

enter a valid HEX colour value

Current Page Item Indicator Symbol

 

Current Page Parent Indicator Symbol

 
Top Level Menu items

These options modify the top level menu items.

 

Background image:

If no image is specified, only the background colour will be displayed

Click Here to Pick up the color Background colour:

enter a valid HEX colour value

Click Here to Pick up the color Background colour on hover:

enter a valid HEX colour value

Click Here to Pick up the color Text colour:

enter a valid HEX colour value

Click Here to Pick up the color Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

Font family:

choose a font family
(show premium options »)

Font weight:

choose a font weight

Height:

enter measurement in PXs

Horizontal padding:

enter measurement in PXs

Border width:

Click Here to Pick up the color Border colour:

enter a valid HEX colour value

Flyout Width:

Only applies to Vertical Flyout menus

Repeat background image:

Only applies to Vertical Flyout menus

Buttonized: (developmental)

Creates graphical buttons instead of basic text links. Note: You must have a background image colour specified above for this to work
Lower Level Menu items

These options modify the second level menu items.

Click Here to Pick up the color Background colour:

enter a valid HEX colour value

Click Here to Pick up the color Background colour on hover:

enter a valid HEX colour value

Click Here to Pick up the color Text colour:

enter a valid HEX colour value

Click Here to Pick up the color Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

Font family:

choose a font family
(show premium options »)

 

Font weight:

choose a font weight

Click Here to Pick up the color Border colour:

enter a valid HEX colour value

Opacity:

enter an opacity between 0 and 1

Vertical padding:

enter vertical padding in PXs

Border width:

enter a border width in PXs

Width:

enter a width in PXs

Flyout direction:

 
CSS Code

Paste the following code into your CSS file. This code can be used with any unordered list which has an ID of #suckerfishnav.
#suckerfishnav {
    background:#bbb ;
    font-size:13px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    border:1px solid #bbb;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 25px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:131px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:129px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:normal;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:3px 10px;
    width:80px;
    font-size:13px;
    color:#fff;
    }
#suckerfishnav li ul ul {
    margin:-20px 0 0 130px;
    }
#suckerfishnav li li:hover {
    background:#99CCFF;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#fff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#fff;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#fff;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#bbb;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#99CCFF;
    }
Implementation

Note: the following does not apply if you are using our Multi-level Navigation Plugin.
The CSS above will work on any unordered list with an ID of #suckerfishnav, ie:

<ul id="suckerfishnav">
<li><a href="">Tomato</a></li>
<li><a href="">Capsicum</a></li>
<li><a href="">Cucumber</a></li>
</ul>

Due to the inadequacies of older versions of Internet Explorer, it is advisable to download and integrate the “Suckerfish Javascript for Internet Explorer” code with your site. If you want your visitors to be able to access your menu with their keyboard, download the “Suckerfish Javascript for keyboard accessibility” code and include it too. Here’s is an example of the code used to include these two files into your web pages:

<script type="text/javascript" src="suckerfish_keyboard.js"></script>
<!--[if lte IE 6]>
<script type=”text/javascript” src=”suckerfish_ie.js”></script>
<![endif]–>
WordPress Plugin

We have released a new version of our Multi-level Navigation plugin with an option in the admin panel to enter the CSS from this page to generate a menu with the same style as on this page within your WordPress site.
Support

If you have any questions, suggestions or problems, please leave a message in our multi-level navigation support board.

Posted on Mar 7th 2008 by Ryan

Copyright © 2008 PixoPoint Web Development