Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making A Menu Item Drop Down

    Hey Guys,


    I know enough to that the code below needs to be changed in addition to the css file but I have tried and the additional menu items I add to the code below
    show on the website scrambled. Can anyone help me out a little. Thanks!!!



    <div id="slidetabsmenu">
    <ul>
    <li {if $mainmenu eq "b"}id="current"{/if}><a href="http://blog.boitube.com"><span>{$lang5|upper}</span></a></li>
    <li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community"><span>{$lang4|upper}</span></a></li>
    <li {if $mainmenu eq "5"}id="current"{/if}><a href="http://spankpages.com/links/"><span>Links</span></a></li>
    <li {if $mainmenu eq "6"}id="current"{/if}><a href="{$baseurl}/albums"><span>{$lang3|upper}</span></a></li>
    <li {if $mainmenu eq "c"}id="current"{/if}><a href="{$baseurl}/categories"><span>{$lang2|upper}</span></a></li>
    <li {if $mainmenu eq "" OR $mainmenu eq "0"}id="current"{/if}><a href="{$baseurl}/"><span>{$lang0|upper}</span></a></li>
    </ul>
    </div>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello TeeJay2012,
    I'm not familiar with your $mainmenu/$lang stuff, which seems invalid no matter what DocType I try, but I do have a simple example of how a CSS drop down menu works here. Maybe that will help you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply and thanks for the link it did help me a lot. I'd like to explain a little further and maybe your input can put me on the right track.

    If you never mind the "$mainmenu/$lang" crap everything else works the same.

    This is what I've done with the html coding so far:

    <div id="slidetabsmenu">
    <ul>

    <li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community"><span>{$lang4|upper}</span></a>

    <ul>

    <li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community1"><span>{$lang4|upper}</span></a>
    <li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community2"><span>{$lang4|upper}</span></a>
    </ul>


    </li>

    <li {if $mainmenu eq "6"}id="current"{/if}><a href="{$baseurl}/albums"><span>{$lang3|upper}</span></a></li>
    <li {if $mainmenu eq "c"}id="current"{/if}><a href="{$baseurl}/categories"><span>{$lang2|upper}</span></a></li>
    <li {if $mainmenu eq "" OR $mainmenu eq "0"}id="current"{/if}><a href="{$baseurl}/"><span>{$lang0|upper}</span></a></li>
    </ul>
    </div>

    * The additional links show up but I guess they need to be styled in css.
    Here is the css files below. How can I get the links to align properly, hide and drop down when I hover over a menu item?

    Here is the css info:

    #slidetabsmenu {
    float:right;
    width:100%;
    font-size:14px;
    height: 30px;
    line-height:normal;
    margin: 8px 0 0 0;
    }
    #slidetabsmenu ul{
    list-style-type: none;
    margin:0;
    padding:0;
    }

    #slidetabsmenu li{
    display:inline;
    padding:0;
    }

    #slidetabsmenu a {
    float:right;
    background:url(<?php echo $imageurl; ?>/tab-left.png) no-repeat left bottom;
    background-position:0% -70px;
    margin: 0 0 0 2px;
    padding:0 0 0 13px;
    font:bold 12px/28px Arial, Helvetica, sans-serif;
    color:#fff;
    }

    #slidetabsmenu a span {
    float:right;
    cursorointer;
    display:block;
    height:30px;
    background:url(<?php echo $imageurl; ?>/tab-right.png) no-repeat right bottom;
    background-position:100% -70px;
    padding: 0px 20px 0px 11px;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #slidetabsmenu a span {float:none;}
    /* End IE5-Mac hack */

    #slidetabsmenu a:hover span {
    color: #fff;
    background-color: #0066FF;
    border-radius: 5px;

    }

    #slidetabsmenu #current a {
    background-position:0 0px;
    }

    #slidetabsmenu #current a span {
    background-position:100% 0px;
    color: fff27.01.2009 16:09:33;
    }

    #slidetabsmenu a:hover {
    background-position:0% -35px;
    }

    #slidetabsmenu a:hover span {
    background-position:100% -35px;




    Thanks again for your help so far!!!



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •