wordpress theme help needed

Discussion in 'WordPress' started by williamsweb, Jan 26, 2010.

  1. #1
    hi
    how to create a drop down top navigation menu with wordpress?

    I want to show categories as menu items, and their subcategories as drop down list.. please help :(:(
     
    williamsweb, Jan 26, 2010 IP
  2. kishore415

    kishore415 Well-Known Member

    Messages:
    1,462
    Likes Received:
    41
    Best Answers:
    0
    Trophy Points:
    160
  3. williamsweb

    williamsweb Active Member

    Messages:
    2,016
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    75
    #3
    no, that's not I want
    i want a top header navigation, not a widget sidebar
     
    williamsweb, Jan 26, 2010 IP
  4. mizaks

    mizaks Well-Known Member

    Messages:
    2,066
    Likes Received:
    126
    Best Answers:
    0
    Trophy Points:
    135
    #4
    mizaks, Jan 26, 2010 IP
  5. williamsweb

    williamsweb Active Member

    Messages:
    2,016
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    75
    #5
    I tried that, but it dont make categories menu with subcategories list..
    I want like this wphacks.com - top 3rd black horizontal menu.
     
    williamsweb, Jan 26, 2010 IP
  6. Wp-Mod.Com

    Wp-Mod.Com Peon

    Messages:
    381
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    this is what wp-hacks uses , css based menu drop down
    paste this in css

    .cat-menu {
    background:#F0F0F0 none repeat scroll 0 0;
    border-bottom:1px solid #CCCCCC;
    border-top:1px solid #CCCCCC;
    display:block;
    margin:auto;
    overflow:auto;
    }
    .cat-menu ul {
    display:block;
    float:left;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:5px;
    z-index:1000;
    }
    .cat-menu ul li a {
    color:gray;
    display:block;
    font-size:12px;
    font-weight:bold;
    padding:3px 10px;
    text-decoration:none;
    }
    .cat-menu ul li {
    color:#AAAAAA;
    float:left;
    }
    .cat-menu ul li.home {
    border-left:1px solid #E3E0D5;
    }
    .cat-menu ul ul {
    font-weight:400;
    height:auto;
    left:-999em;
    margin:auto;
    position:absolute;
    width:151px;
    }
    .cat-menu ul li li {
    width:149px;
    }
    .cat-menu ul li li a {
    border-bottom:1px solid #EEEEEE;
    min-width:130px;
    padding:3px 10px;
    }
    .cat-menu ul li ul ul {
    border-left:1px solid #E3E0D5;
    margin:-22px 0 0 149px;
    }
    .cat-menu ul li:hover li a, .cat-menu ul li ul li:hover li a, .cat-menu ul li ul li ul li:hover li a, .cat-menu ul li ul li ul li ul li:hover li a, .cat-menu ul li:hover li a, .cat-menu ul li ul li:hover li a, .cat-menu ul li ul li ul li:hover li a, .cat-menu ul li ul li ul li ul li:hover li a {
    color:#BBBBBB;
    }
    .cat-menu ul li:hover ul ul, .cat-menu ul li:hover ul ul ul, .cat-menu ul li:hover ul ul ul ul, .cat-menu ul li.sfhover ul ul, .cat-menu ul li.sfhover ul ul ul, .cat-menu ul li.sfhover ul ul ul ul {
    left:-999em;
    }
    .cat-menu ul li:hover ul, .cat-menu ul li li:hover ul, .cat-menu ul li li li:hover ul, .cat-menu ul li li li li:hover ul, .cat-menu ul li.sfhover ul, .cat-menu ul li li.sfhover ul, .cat-menu ul li li li.sfhover ul, .cat-menu ul li li li li.sfhover ul {
    left:auto;
    }
    .cat-menu ul li:hover, .cat-menu ul li.sfhover {
    color:#000000;
    }
    .cat-menu ul li:hover a, .cat-menu ul li ul li:hover a, .cat-menu ul li ul li ul li:hover a, .cat-menu ul li ul li ul li ul li:hover a, .cat-menu ul li:hover a, .cat-menu ul li ul li:hover a, .cat-menu ul li ul li ul li:hover a, .cat-menu ul li ul li ul li ul li:hover a {
    background:#FFFFFF none repeat scroll 0 0;
    color:#666666;
    opacity:0.95;
    }
    .cat-menu ul li.current_page_item a, .cat-menu ul li.current-cat-parent a, .cat-menu ul li.current-cat-ancestor a, .cat-menu ul li.current-cat a, .cat-menu ul li ul li.current-cat-parent a, .cat-menu ul li ul li.current-cat-ancestor a, .cat-menu ul li ul li.current-cat a, .cat-menu ul li ul li ul li.current-cat-parent a, .cat-menu ul li ul li ul li.current-cat-ancestor a, .cat-menu ul li ul li ul li.current-cat a {
    background:#FFFFFF none repeat scroll 0 0;
    color:#666666;
    }
    Code (markup):
    paste this in header or wherever you like show category bar

    <div class="cat-menu">
            <ul><li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
    <?php wp_list_categories('depth=0&title_li=); ?>
    			</ul>
    </div>
    Code (markup):
     
    Wp-Mod.Com, Jan 26, 2010 IP
  7. williamsweb

    williamsweb Active Member

    Messages:
    2,016
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    75
    #7
    will it show subscategories on hover? (coz i see there is no mention of subcats in your code )
     
    williamsweb, Jan 26, 2010 IP
  8. Wp-Mod.Com

    Wp-Mod.Com Peon

    Messages:
    381
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    try it and its will show subcategories in the category bar , just try it its a wordpress inbuilt function
     
    Wp-Mod.Com, Jan 26, 2010 IP