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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Drop Down Menu Coding

    I do not have a host site. I have my domain mapped to the wp blog. I've been working for 2 days on overhauling my site http://www.jenaphotography.com At this point I have just changed things on the current theme (connections). I do not know how to write CSS. If anyone can me of some help it would be greatly appreciated.

    At the top is my navigation menu bar. I'd like to add sub menus to 2 of the tabs (portfolio and pricing). I've been searching for hours online for CSS coding to do this. But it's all greek to me. On the portfolio tab I'd like to add 12 sub menus and the pricing tab I'd like to add 6 sub menus.

    Thank you!

    I've corrected my post per Rowsdower's request. I didn't realize it was all smashed together and not readable. I have a top navigation bar which is a menu where it says the following ..... Home, Contact Photographer, Portfolio and Pricing. I want to add 12 sub menus to the Portfolio heading and 6 sub menus to the Pricing heading. The original CSS does not have a drop down menu coding. I have NO clue how to write CSS. I only know how to somewhat change what is already there.


    #topnav
    {
    list-style:none;
    font-size:0.9em;
    margin:0 auto;
    padding:12px 20px 0 0;
    text-align:right;
    font-family:Verdana, Arial, Sans-Serif;
    }

    #topnav li
    {
    list-style:none;
    display:inline;
    margin:0 0 0 0;
    padding:0 6px 0 5px;
    font-weight:bold;
    border-right: 2px solid #BBC4A3;
    }

    #topnav li a:link, #topnav li a:visited
    {
    text-decoration:none;
    color:#BBC4A3;
    }

    #topnav li a:hover, #topnav li a:active
    {
    color:#F7F3ED;
    }
    Last edited by JeannetteK; 02-25-2009 at 06:55 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hello and welcome to the forums! First off, please edit your post to use the [code][/code] tags to make your thread much easier for us to read.

    Second, try looking at the menu here for starters:
    http://www.cssplay.co.uk/menus/dd_valid.html

    Save a backup copy of what you have now and try some experimentation.

    Dissect the CSS and you can easily apply this method to your page. There are plenty of other possibilities available on that site. Once you have given it the old "college try" let us see what you've been able to accomplish. We are much more likely to respond to specific issues rather than a blanket request to do the work for you entirely.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    JeannetteK (02-25-2009)

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Hello and welcome to the forums! First off, please edit your post to use the [code][/code] tags to make your thread much easier for us to read.

    Second, try looking at the menu here for starters:
    http://www.cssplay.co.uk/menus/dd_valid.html

    Save a backup copy of what you have now and try some experimentation.

    Dissect the CSS and you can easily apply this method to your page. There are plenty of other possibilities available on that site. Once you have given it the old "college try" let us see what you've been able to accomplish. We are much more likely to respond to specific issues rather than a blanket request to do the work for you entirely.
    Thank you. I didn't realize the code was all smashed. Also, Thanks for your assurance but I did NOT attend college well except 2 years for Early Childhood Education. I understand some of the CSS but the thing is what I want is NOT in the CSS now. I need to write it and add it in. Well, I know nothing about writing CSS or programming.

    I'm off to read the link that you provided above. Thank you for your reply.

  • #4
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks Rowsdower I corrected my original post.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by JeannetteK View Post
    Thank you. I didn't realize the code was all smashed. Also, Thanks for your assurance but I did NOT attend college well except 2 years for Early Childhood Education. I understand some of the CSS but the thing is what I want is NOT in the CSS now. I need to write it and add it in. Well, I know nothing about writing CSS or programming.

    I'm off to read the link that you provided above. Thank you for your reply.
    Well, the saying "give it the old college try" is a turn of phrase meaning roughly "give it a good solid effort." I meant no offense and it certainly doesn't take a college degree to work out HTML/CSS. It only takes patience, experimentation, and a willingness to learn.

    Anyway, visiting the link I gave you and looking at that CSS is what will help you to fix your own menu's CSS to use dropdowns.

    What I would recommend is that you download the HTML and CSS files that Stu provides on that site and then open up the css file in Notepad (or any other simple text editor, but NOT MSWord) and then tweak his menu until it looks like what you want. Once you have his menu looking consistent with your page design you can just copy and paste the code into your webpage.

    Edit: I forgot to mention that if the programming languages for HTML and CSS are unfamiliar you should definitely start out by visitng the FREE and easy-to-follow tutorials from w3schools.com (see the link in my sig below). This will take you step-by-step through the very basics of HTML and CSS so that you will know what it is you are looking at when you view the code from other sites and when you try to update your own code.
    Last edited by Rowsdower!; 02-25-2009 at 07:08 PM. Reason: I forgot to mention the tutorials!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    JeannetteK (02-25-2009)

  • #6
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Well, the saying "give it the old college try" is a turn of phrase meaning roughly "give it a good solid effort." I meant no offense and it certainly doesn't take a college degree to work out HTML/CSS. It only takes patience, experimentation, and a willingness to learn.

    Anyway, visiting the link I gave you and looking at that CSS is what will help you to fix your own menu's CSS to use dropdowns.

    What I would recommend is that you download the HTML and CSS files that Stu provides on that site and then open up the css file in Notepad (or any other simple text editor, but NOT MSWord) and then tweak his menu until it looks like what you want. Once you have his menu looking consistent with your page design you can just copy and paste the code into your webpage.

    Edit: I forgot to mention that if the programming languages for HTML and CSS are unfamiliar you should definitely start out by visitng the FREE and easy-to-follow tutorials from w3schools.com (see the link in my sig below). This will take you step-by-step through the very basics of HTML and CSS so that you will know what it is you are looking at when you view the code from other sites and when you try to update your own code.

    No offense taken. I was born in Germany and came to the US when I was 5 and didn't learn English til I was 6. I am hands on learner. Comprehending the written language is not a strong point for me. Especially CSS and computer programming. I have changed allot on the original theme. But have not added anything as that's a whole other ballpark. I'm off to Stu's website to see which codes to download and give it another try. I've done some changes then preview with my blog so that is a nice feature. Don't suppose their is some sort of program to tell it waht you want and it write CSS for you? Wishful thinking huh. LOL

  • #7
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ok I tried the coding from Stu. I'm missing something as I've added it to CSS and it does nothing.

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm poking around your page right now but I don't see where the stylesheets have been updated. Which file did you update with the CSS from Stu's menu?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    JeannetteK (02-25-2009)

  • #9
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    I'm poking around your page right now but I don't see where the stylesheets have been updated. Which file did you update with the CSS from Stu's menu?
    I tried 2 different codes. And once I inserted it and then previewed it. I saw no change in the preview. In wordpress when you make a change to the style sheet you can preview it before you save it.

    I tried these 2.

    /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/dd_valid.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    /* common styling */
    .menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
    .menu ul {padding:0; margin:0; list-style: none;}
    .menu ul li {float:left; position:relative;}
    .menu ul li ul {display: none;}

    /* specific to non IE browsers */
    .menu ul li:hover a {color:#fff; background:#36f;}
    .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
    .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
    .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
    .menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
    .menu ul li:hover ul li:hover ul.left {left:-105px;}


    /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/dd_valid.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
    .menu ul li a:hover ul li a.hide {display:none;}

    .menu ul li a:hover {color:#fff; background:#36f;}
    .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
    .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
    .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
    .menu ul li a:hover ul li a ul {visibility:hidden;}
    .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
    .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
    .menu ul li a:hover ul li a:hover ul.left {left:-105px;}

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Before you do anything to the CSS you need to update the HTML so to use a <div> to contain your menu. The <div> should have a class of "menu". You will then need to add a few generic sub-menu items to test the functionality of the menu. Overall you should do something like the parts in red below:
    Code:
    <div class="menu"> <!-- add this to open the .menu div -->
      <ul id="topnav">
        <li><a href="http://jenaphotography.com" id="navHome" title="Posted Recently" accesskey="h">Home</a></li>
        <li class="page_item page-item-149"><a href="http://jenaphotography.com/contact-photographer/" title="Contact&nbsp;Photographer">Contact&nbsp;Photographer</a></li>
        <li class="page_item page-item-143"><a href="http://jenaphotography.com/portfolio/" title="Portfolio">Portfolio</a>
          <ul>
            <li><a href="#nogo">something</a></li>
            <li><a href="#nogo">another thing</a></li>
          </ul>
        </li> <!-- notice that the list item is closed AFTER the sub-menu list is inserted -->
        <li class="page_item page-item-147"><a href="http://jenaphotography.com/pricing/" title="Pricing">Pricing</a></li>
        <li class="page_item page-item-139"><a href="http://jenaphotography.com/meet-the-photographer/" title="The&nbsp;Photographer">The&nbsp;Photographer</a></li>
      </ul>
    </div> <!-- add this to close the .menu div -->
    After altering your HTML file as noted above you should start to see signs of life with your new menu CSS and your portfolio link should have a sub-menu appear when you put your mouse over it. Let me know if you get lost with any of this.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    JeannetteK (02-25-2009)

  • #11
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Uhm Yea this is WAY over my head. I'll have to have a yard sale to get some money to pay someone to do it for me. Thanks!

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by JeannetteK View Post
    Uhm Yea this is WAY over my head. I'll have to have a yard sale to get some money to pay someone to do it for me. Thanks!
    I hate to see anyone give up. I know this can seem intimidating at first but if you take your time with it (and take a breather for a day or two when things get frustrating) I promise you can do this.

    I tought myself how to code HTML and CSS using www.w3schools.com by taking it step-by-step. What you are trying to do is somewhat intermediate and if you're a beginner you'll get lost.

    Start small by coding a very simple plain text HTML page. Then you step up with things like link tags, lists (and sub-lists), and so on. Take everything a piece at a time and you will learn how each piece works on its own.

    What you're trying now is kind of like learning to ride a motorcycle without ever having learned to ride a bicycle. It's not impossible to learn this way, but it's a much steeper learning curve.

    Anyway, that's my advice - take it or leave it.

    Good luck!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    JeannetteK (02-26-2009)

  • #13
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    I hate to see anyone give up. I know this can seem intimidating at first but if you take your time with it (and take a breather for a day or two when things get frustrating) I promise you can do this.

    I tought myself how to code HTML and CSS using www.w3schools.com by taking it step-by-step. What you are trying to do is somewhat intermediate and if you're a beginner you'll get lost.

    Start small by coding a very simple plain text HTML page. Then you step up with things like link tags, lists (and sub-lists), and so on. Take everything a piece at a time and you will learn how each piece works on its own.

    What you're trying now is kind of like learning to ride a motorcycle without ever having learned to ride a bicycle. It's not impossible to learn this way, but it's a much steeper learning curve.

    Anyway, that's my advice - take it or leave it.

    Good luck!

    Thanks! I've been working on just this drop down section for 2 days then stopped for a week and now back at it. It's very frustrating when I look at coding sites and they say CSS is easy to learn.

    I guess it is for those who are book learners and not us hands on learners. I can do things fine and dandy after seeing someone do it or someone actually going through it with me step by step. But I know NOTHING about CSS and computer programming.

    Interesting analogy about the motorcycle. I was one of those who never had a trike or 3 wheeler. I learned to ride a bike with no training wheels or 3 wheel. I'm also one of those that just jumps in and learn as I go. But this is beyond me with CSS.

  • #14
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    OK I've got more questions. I was doing some searching online.
    I found a CSS Menu Generator. Basically I just named the menus and sub menus.
    And the program did the rest of the CSS coding for me.
    Where do I put this coding in my CSS stylesheet?
    And do I need to delete the previous top nav bar coding?


    font-style:normal;
    font-weight:bold;
    font-size:12px;
    color: #FFFFFF;
    background-color: #000000;
    text-decoration: none;
    }
    .pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
    .pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #000000; border-left:solid 1px #000000;}
    .pd_menu_01 ul li a {color: #FFFFFF;background: #000000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
    .pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
    .pd_menu_01 ul li:hover a {background-color:#000000; text-decoration:none; color:#800000;} /*Color main cells hovering mode*/
    .pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
    .pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000; color:#FFFFFF;} /*Color subcells normal mode*/
    .pd_menu_01 ul li:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#800000;} /*Color subcells hovering mode*/
    .pd_menu_01 ul li a:hover {background-color:#000000; text-decoration:none;color:#800000;} /*Color main cells hovering mode*/
    .pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
    .pd_menu_01 ul li ul li a:visited { background-color:#000000; color:#FFFFFF;} /*Color subcells normal mode*/
    .pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000; color:#FFFFFF;}
    .pd_menu_01 ul li a:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#800000;} /*Color subcells hovering mode*/
    </style>



    <div class="pd_menu_01 ">
    <ul><li><a href="#">{Home}</a>
    </li></ul>

    <ul><li><a href="#">{Contact Photographer}</a>
    </li></ul>

    <ul><li><a href="#">{Portfolio}</a>
    <ul>
    <li><a href="#" >Maternity</a></li>
    <li><a href="#" >Newborn</a></li>
    <li><a href="#" >Children</a></li>
    <li><a href="#" >Seniors</a></li>
    <li><a href="#" >Engagements</a></li>
    <li><a href="#" >Family's</a></li>
    <li><a href="#" >TTD</a></li>
    <li><a href="#" >Nature</a></li>
    <li><a href="#" >Artsy</a></li>
    <li><a href="#" >Macro</a></li>
    <li><a href="#" >Eliana</a></li>
    <li><a href="#" >Misc.</a></li>
    </ul>
    </li></ul>

    <ul><li><a href="#">{Pricing}</a>
    <ul>
    <li><a href="#" >Welcome</a></li>
    <li><a href="#" >What to Wear</a></li>
    <li><a href="#" >Business Stuff</a></li>
    <li><a href="#" >Custom Portraiture</a></li>
    <li><a href="#" >Collections</a></li>
    <li><a href="#" >Referral Program</a></li>
    </ul>
    </li></ul>

    </div>
    Last edited by JeannetteK; 02-26-2009 at 02:21 AM.

  • #15
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Put all the stuff between the 'style' tags in the head section of your .html page (or separately in what is called a stylesheet, if you prefer).

    The rest of it goes in the navbar div.

    Make a duplicate of the page and try it out until you get it exactly as you want it. Most of all, have fun playing around with it!

  • Users who have thanked Avril for this post:

    JeannetteK (02-26-2009)


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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