Custom Menu Items

[lilrichie]

Hello,

Is their anyway using the suckerfish modification to ad your own menu items at the moment all i have the option of using is Home, Pages, Categories, Archives & Blogroll i would like to add my own items.

I have modified the CSS here it is below. And the site is http://www.thehowellsnest.com

/* SUCKERFISH */

#suckerfishnav {
    height:57px;
padding:0 0 0 13px;
margin:0;
background:url(images/navigation-bg-no.png) no-repeat;
overflow:hidden;
width:100%;
}
#suckerfisho, #suckerfisht, #suckerfishth, #suckerfishf, #suckerfishfi {
line-height: 50px;
}
#suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:45px;
    padding:0;
    margin:0;
    width:100%;
}
#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 10px;
margin: 0px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
    }
#suckerfishnav li {
    float:left;
}
#suckerfishnav ul {position:absolute;
    left:-999em;
    height:auto;
    width:151px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    }
#suckerfishnav li li {width:149px;font-weight:bold;font-family:verdana,sans-serif;}
#suckerfishnav li li a {padding:4px 10px;width:130px;font-size:12px;color:#dddddd;}
#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#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:#ef8927;}
#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:#5e91ca;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#58a6ff;}
#suckerfishth {margin: 0 175px 0 0}

Many Thanks
Richard Howell

[imported_Ryan]

Have you tried the custom code option?

With that you can add whatever HTML you want and hence add any links you may ever want.

[lilrichie]

How does one use the custom HTML option?

Rich

[imported_Ryan]

If you hover over ‘(example)’ in the admin panel by the section which says ‘Custom HTML code’ above the custom code boxes you will see the following tips:

[quote:3mvho4rh]Note: You can have multiple top level menu items in one custom code entry. The following example will display a menu with links to ‘Home’, ‘Categories’ and ‘Pages’, the ‘Categories’ and ‘Pages’ links would have dropdowns and the ‘Page 1’ link in the ‘Pages’ dropdown would contain another further level.[/quote:3mvho4rh]

[code:3mvho4rh]<li><a href="http://pixopoint.com/">Home</a></li>
<li><a href="">Categories</a>
  <ul>
    <li><a href="http://pixopoint.com/categories/templates/">Templates</a></li>
    <li><a href="http://pixopoint.com/categories/plugins/">Plugins</a></li>
    <li><a href="http://pixopoint.com/categories/plugins/">WordPress</a></li>
  </ul>
</li>
<li><a href="">Pages</a>
  <ul>
    <li><a href="http://pixopoint.com/page1/">Page 1</a>
      <ul>
        <li><a href="http://pixopoint.com/page1/flyout/">Flyout</a>
          <ul>
            <li><a href="http://pixopoint.com/page1/flyout/test1/">Test 1</a></li>
            <li><a href="http://pixopoint.com/page1/flyout/test2/">Test 2</a></li>
            <li><a href="http://pixopoint.com/page1/flyout/test3/">Test 3</a></li>
          </ul>
        </li>
        <li><a href="http://pixopoint.com/page1/nested1/">Nested 1</a></li>
        <li><a href="http://pixopoint.com/page1/nested2/">Nested 2</a></li>
      </ul>
    </li>
    <li><a href="http://pixopoint.com/page2/">Page 2</a></li>
    <li><a href="http://pixopoint.com/page3/">Page 3</a></li>
  </ul>
</li>[/code:3mvho4rh]

[Author]

Posts