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.

• Fly outs
  • Flyout #1
    • Flyout #2
      • Test
      • Test
      • Test
      • Test
    • Test
    • Test
    • Test
  • Test
  • Test
  • Test
• Blog
  • Dropdown Plugin
  • Aqua Vaccinium
  • Hellish Simplicity
  • Dropdown Generator
  • Simple CMS Plugin
  • Simple CMS Theme
• Forum
  • Themes
  • Dropdown menus
  • Simple CMS Plugin

Suckerfish Dropdown CSS Generator

Welcome to the Suckerfish Dropdown 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.

Top Level Menu Items

RedPinkBlueGreenYellowNo image Background image:

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

Background colour:

enter a valid HEX colour value

Background colour on hover:

enter a valid HEX colour value

Text colour:

enter a valid HEX colour value

Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

verdana,sans-serifzapf-chancery,cursivewestern,fantasycourier,monospacehelvetica,sans-seriftimes,serif Font family:

choose a font family

boldnormal Font weight:

choose a font weight

Height:

enter measurement in PXs

Horizontal padding:

enter measurement in PXs

Border width:

Border colour:

enter a valid HEX colour value

Dropdown Menu Items

Background colour:

enter a valid HEX colour value

Background colour on hover:

enter a valid HEX colour value

Text colour:

enter a valid HEX colour value

Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

verdana,sans-serifzapf-chancery,cursivewestern,fantasycourier,monospacehelvetica,sans-seriftimes,serif Font family:

choose a font family

boldnormal Font weight:

choose a font weight

Opacity:

enter an opacity between 0 and 1

Vertical padding:

enter vertical padding in PXs

Horizontal border width:

enter a border width in PXs

Width:

enter a width in PXs

rightleft Flyout direction:

Premade Designs:

Current Design Red Dazzle Green Dazzle Pink Dazzle Blue Dazzle Yellow Dazzle Nature Orange Clown Berrylicious Death Bubble Gum Default WordPress

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:#9C1F1B url("images/suckerfish_red.png") repeat-x;
font-size:18px;
font-family:verdana,sans-serif;
font-weight:bold
}

#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:40px;
padding:0;
border:1px solid #aaa;
margin:0 0 1px 0;
width:100%
}

#suckerfishnav a {
display:block;
color:#ddd;
text-decoration:none;
padding:0px 10px
}

#suckerfishnav li {
float:left;
padding:0
}

#suckerfishnav li ul {
position:absolute;
left:-999em;
height:auto;
width:100px;
font-weight:normal;
margin:0;
line-height:1;
-moz-opacity:0.85;
opacity:0.85;
khtml-opacity:0.85
}

#suckerfishnav li li {
padding-right:1px;
width:100px;
border-bottom:1px solid #aaa
}

#suckerfishnav li li a {
padding:4px 10px
}

#suckerfishnav li ul li {
font-weight:bold;
font-family:verdana,sans-serif
}

#suckerfishnav li ul li a {
font-size:12px;
color:#ddd
}

#suckerfishnav li:hover ul li a {
color:#ddd
}

#suckerfishnav li ul ul {
margin:-21px 0 0 101px
}

#suckerfishnav li ul li:hover {
background:#9C1F1B
}

#suckerfishnav li ul li:hover a {
color:#ddd
}

#suckerfishnav li ul li:hover li a {
color:#ddd
}

#suckerfishnav li ul li li:hover a {
color:#ddd
}

#suckerfishnav li ul li ul li:hover ul li a {
color:#ddd
}

#suckerfishnav li ul li ul li:hover ul li:hover a {
color:#ddd
}

#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {
left:-999em
}

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {
left:auto;
background:#444
}

#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#DA0909
}

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#ddd
}


Implementation

Note: the following does not apply if you are using our WordPress Dropdown Menu 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 WordPress Dropdown Menu 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 dropdowns support board.

Posted on Mar 7th 2008 by Ryan