need help modifying Andreas 08 3 column with CSS hover list

  • Hey all,

    I found a page that describes what I want to do:

    https://css.maxdesign.com.au/listamatic2/horizontal04.htm

    (look at item #1)

    But I don’t know how to make it happen. If you look at my page:

    https://praguetech.com/tagby

    …you will see that I have a bunch of pages at the bottom of the header. I also have several child pages for each of these main pages. What I want is for the child pages to appear as a CSS hover list below each of the parent pages that they associated with.

    This is the code as it currently appears in the header:

    <div id=”navigation”>

      <li class=”selected”>>Home

    • <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>

    </div>

    This is the code from the Listamatic2 website:

    <div id=”navcontainer”>
    <ul id=”navlist”>
    <li id=”active”>Item one
    <ul id=”subnavlist”>
    <li id=”subactive”>Subitem one

    • Subitem two
    • Subitem three
    • Subitem four
    • Item two
    • Item three
    • Item four

      • </div>

      CSS
      ul#navlist { font-family: sans-serif; }

      ul#navlist a
      {
      font-weight: bold;
      text-decoration: none;
      }

      ul#navlist, ul#navlist ul, ul#navlist li
      {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      }

      ul#navlist li { float: left; }

      ul#navlist li a
      {
      color: #ffffff;
      background-color: #003366;
      padding: 3px;
      border: 1px #ffffff outset;
      }

      ul#navlist li a:hover
      {
      color: #ffff00;
      background-color: #003366;
      }

      ul#navlist li a:active
      {
      color: #cccccc;
      background-color: #003366;
      border: 1px #ffffff inset;
      }

      ul#subnavlist { display: none; }
      ul#subnavlist li { float: none; }

      ul#subnavlist li a
      {
      padding: 0px;
      margin: 0px;
      }

      ul#navlist li:hover ul#subnavlist
      {
      display: block;
      position: absolute;
      font-size: 8pt;
      padding-top: 5px;
      }

      ul#navlist li:hover ul#subnavlist li a
      {
      display: block;
      width: 10em;
      border: none;
      padding: 2px;
      }

      ul#navlist li:hover ul#subnavlist li a:before { content: ” >> “; }

      Is there any kind person out there, smarter than I, who can tell me how to put these chunks of code together so that I can hover over the parent page link and have a list of the child pages associated with that parent appear below, and then be able to click on and go to either the parent or child pages?

      Or can someone point me at a good source of info that would tell me how to do this. I am a n00b, so it would help if it were fairly step by step.

Viewing 5 replies - 1 through 5 (of 5 total)

  • I did a little searching and found this https://www.ads-software.com/support/topic/72767?replies=4. It should help. In fact, since I also use this theme, I’m going to try it, too.

    I finally got it to work. If you follow the directions, I found that in step 1, the div id=”nav” worked for me (and not toolbar). In step 4, after you add that to the stylesheet, I changed the #nav margin-left to 1px (instead of 295px). I found I didn’t need step 6. I did, however, need to add another div to the stylesheet. I called it extradiv and had only “clear: both”.

    #extradiv {
    clear: both;
    }

    I found I needed this to make sure the sidebar and other containers flowed correctly. Then I added this div after I added the funtion div in my header script.

    <div id="nav">
    <li class="selected"><a href=<?php echo get_settings('home'); ?>>Home</a></li>
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </div>

    <div id="extradiv">
    </div>

    Thread Starter kencameron

    (@kencameron)

    OK, so cool. I will give it a try and report back. Thank you so much.

    Thread Starter kencameron

    (@kencameron)

    Also Jwurster, can you post a link to your website with the working child pages?

    Thread Starter kencameron

    (@kencameron)

    Hey All,
    I managed to get the Son os Sucker fish menus working with my Andreas 08 3 column Theme, sort of that is.

    If you check out

    https://praguetech.com/tagby

    Firefoxyou will see that the menus look nice, and drop down to display the child pages. The problem is that it only really works properly in Firefox based web browsers. If I look at it in Opera, or Internet Explorer, the menus do not disappear after you have moved the pointer off of them. In Safari, blocks from the right side of drop downs stay on the screen after the menu has disappeared. Can any one give me some hints as how to get this working properly in IE and the rest?

    My thanks in advance.

    what follows is the header.php as I have it now:

    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Archives <?php } ?> <?php wp_title(); ?></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="WordPress <?php bloginfo('version') ?>" />

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <?php wp_head(); ?>

    </head>

    <body>
    <div id="container" >

    <div id="header">
    <h1><?php bloginfo('name'); ?></h1>
    <h2><?php bloginfo('description'); ?></h2>
    </div>

    <script language="javascript">
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>

    <div id="nav">
    <li class="selected">>Home
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </div>

    <div id="extradiv">
    </div>
    [/code]

    What follows is the stylesheet.php section controlling the drop down menus (with a few comments):

    [code]
    /*menu */
    #nav {
    margin-left: 1px;
    list-style: none;
    /* this controls the highlight color */
    /* background: #900; */
    background: #467aa7;

    /* this adds a border above the menu bar when you change padding from 0px to a greater number of px */
    /* padding: 0; */
    padding: 0;
    border: 0px solid #FFFFFF;
    /* border-width: 0px 0px 0px 1px; */
    /*controlls the width of the margin around the menu */
    /* top, , ,Left , */
    border-width: 0px 0px 0px 0px;
    }
    /* this controls the space between the drop down menu border and the menu itself */
    #nav ul {
    /* margin: 0; */
    margin: 0;
    /* padding: 0; */
    padding: 2;
    height: 1em;
    }

    /* I do not know what this controls */
    #toolbar form {
    margin: 0;
    /* margin: 1em; */
    padding: 0.1em 2em 0.1em 0em;
    /* padding: 10em 10em 10em 10em; */
    /* height: 1em; */
    height: 1em;
    }

    /* this controlls the margin around the menu bar */
    #toolbar input {
    /* margin: 1px; */
    margin: 0px;
    }

    #nav a {
    /* display: block; */
    display: normal;
    /* this was not here origionally */
    font-weight:normal;
    /* this controlls the font color of menus */
    color: #FFFFFF;
    text-decoration: none;
    /* padding: 0.1em 2em; */
    /* controlls the horizontal spacing around and between menus */
    padding: 0.1em .8em;
    /* this was not here origionally */
    margin: 0.0em;
    /* this was not here origionally */
    border: 0.0em;
    }

    /* this controlls the backgroung color of the header menus */
    #nav li {
    float: left;
    padding: 0;
    background: #999999;
    border: 0px solid #FFFFFF;
    /* border-width: 1px 0; */
    border-width: 0px 0;
    /* this was not here origionally. This puts the verticle white line in the menu bar seperating hte menue Items.*/
    margin-right: 1px;
    }

    #nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    /* width: 14.4em; */
    width: 14.4em;
    w\idth: 12.9em;
    font-weight: normal;
    /* this controls the border color around the drop down menus */
    border: 0px solid #FFFFFF;
    /* this puts a space between the menu bar and the drop down menu. */
    /* margin: 0; */
    margin: 0;
    list-style: none;
    }

    /* this controls the (white) space between the drop down menu items. */
    #nav li li {
    padding-right: 1em;
    width: 13.4em;
    /* border: 0px; */
    /* border-width: 0.1em 0.1em 0.1em 0.1em solid #FFFFFF; */
    /* this was not here origionally. This adds a margin (whites space) above (between) the drop down menu items. */
    margin-top: 1px;
    }

    #nav li ul a {
    /* width: 12em; */
    width: 12em;
    w\idth: 9em;
    }

    #nav li ul ul {
    margin: -1.75em 0 0 14em;
    }

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

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }

    #nav li:hover, #nav li.sfhover {
    /* background: #F20000; */
    /* this controls the hover color */
    /* background: #6699CC; */
    background: #467aa7;
    }
    /* end menu */
    [/code]

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘need help modifying Andreas 08 3 column with CSS hover list’ is closed to new replies.