+ Post New Thread
Results 1 to 10 of 10
Web Development Thread, Adding a CSS drop down menu in Coding and Web Development; Hi, I'm developing a site for someone and am trying to get the menu to expand to a sub-menu on ...
  1. #1
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15

    Adding a CSS drop down menu

    Hi,

    I'm developing a site for someone and am trying to get the menu to expand to a sub-menu on scroll over. I've currently got it working as can be seenhere by scrolling over the gallery link at the top, except I'm wanting it to be horizontal like the main menu above it.

    Anyone suggest a code for it? The current one I'm using is below if that can be easily modified to do it. I'm still picking up CSS so go easy

    CSS
    Code:
    HOVER VERTICAL
    .navigation ul {
    margin:0px;
    padding:0px;
    }
    .navigation li { 
    display:inline;
    height:30px;
    list-style:none;
    margin-left:15px;
    margin-right:15px;
    }
    .navigation li a {
    text-decoration:none;
    }
    .navigation li a:hover {
    text-decoration:underline;
    }
    .navigation li ul {
    margin:0px;
    padding:0px;
    display:none;
    display:inline-block;
    height:30px;
    float:left;
    list-style:none;
    margin-left:15px;
    position:relative;
    }
    .navigation li:hover ul
    {
    display:block;
    width:160px;
    }
    .navigation li li {
    list-style:none;
    display:list-item;
    }
    HTML
    Code:
    <li><a href="index.html">HOME</a>
    
    </li>
    
    <li><a href="about/about.html">ABOUT</a>
    </li>
    
    <li><a href="gallery/gallery.html">GALLERY</a>
    <ul>  
    <li><a href="gallery/weddings.html"><FONT style="BACKGROUND-COLOR: black">WEDDINGS</FONT></a></li>
    <li><a href="gallery/architecture.html"><FONT style="BACKGROUND-COLOR: black">ARCHITECTURE</FONT></a></li>
    <li><a href="gallery/entertainment.html"><FONT style="BACKGROUND-COLOR: black">ENTERTAINMENT</FONT></a></li>
    <li><a href="gallery/portraiture.html"><FONT style="BACKGROUND-COLOR: black">PORTRAITURE</FONT></a></li>
    <li><a href="gallery/landscapes.html"><FONT style="BACKGROUND-COLOR: black">LANDSCAPES</FONT></a></li>
    <li><a href="gallery/other.html"><FONT style="BACKGROUND-COLOR: black">OTHER</FONT></a></li>
     </ul> 
    </li>
    
    <li><a href="contact/contact.html">CONTACT</a>
    
    </li>
    
    <li><a href="partners/partners.html">PARTNERS</a>
    
    </FONT>
    
    </li></ul></div> 
    
    </ul>
    </div>
    </div>
    <!-- End Menu -->


    Cheers!

  2. #2

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,762
    Thank Post
    3,271
    Thanked 1,053 Times in 974 Posts
    Rep Power
    365
    Different examples here : Menu Scripts

    I presume you mean tab menu ? As per the last example

  3. #3
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15
    That's perfect! I'll give it a shot thanks

  4. #4
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15
    Is there anyway the above code I have posted can be easily converted into the tab menu style? Implementing the code in the link you mentioned destroys the styling of the links on the site, and I'm struggling to get it back to how it should look once I've done so

  5. #5
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15
    The CSS code in the original post is also wrong, I've just realised that's redundant code and the code in use is actually:

    Code:
    /* Sets menu container to stretch across screen */
    #menu_container {
    	width: 100%;
    	height: 30px;
    	border-top: 1px solid #FFF;
    	border-bottom: 1px solid #FFF;
    }
    
    /* Menu layout within menu conainer */
    #menu {
    	width: 1000px;
    	height: auto;
    	margin: 0px auto;
    	text-align: left;
    	font-size: 16px;
    }
    #menu ul {
    	margin: 0px;
    	padding: 6px 0px;
    }
    #menu li {
    	display: inline;
    	padding: 0px;
    	margin: 0px 80px 0px 0px;
    	padding-bottom: 10px;
    }
    #menu a {
    	color: #959595;
    	text-decoration: none;
    }
    #menu a:hover {
    	color: #FFF;
    	padding-bottom: 10px;
    	border-bottom: 5px solid #FFF;
    }
    Any help and suggestions are appreciated!

  6. #6
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15
    I know I'm just rambling to myself here, but I'e managed to get a step further.

    The submenu is now showing as horiziontal (wrong HTML tags linking it to the incorrect part of the CSS document), but all the links are grouped together. If you go to the gallery page and hover over gallery, you'll see what I mean. Can anyone help?

    Thanks

  7. #7

    Join Date
    Dec 2012
    Location
    Skipton, North Yorkshire
    Posts
    23
    Thank Post
    10
    Thanked 3 Times in 3 Posts
    Rep Power
    15
    Just knocked up a simplified example which I think illustrates what you're after, which may help you get somewhere with it:

    Edit this Fiddle - jsFiddle

    Code:
    <div class="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a>
                <ul>
                    <li><a href="#">Submenu Item 2</a></li>
                    <li><a href="#">Submenu Item 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
    Code:
    .menu ul {
        width: 100%;
        display: block;
    }
    
    
    .menu ul li {
        display: inline;
        list-style-type; none;
    }
    
    
    .menu ul ul {
        display: none;
    }
    
    
    .menu ul li:hover > ul {
        display: block;
    }

  8. Thanks to mikecampbell from:

    gtg93 (3rd September 2013)

  9. #8
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15
    Thanks! I'll give that a try

  10. #9

    Join Date
    Jul 2013
    Posts
    4
    Thank Post
    0
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Quote Originally Posted by gtg93 View Post
    Hi,

    I'm developing a site for someone and am trying to get the menu to expand to a sub-menu on scroll over. I've currently got it working as can be seenhere by scrolling over the gallery link at the top, except I'm wanting it to be horizontal like the main menu above it.

    Anyone suggest a code for it? The current one I'm using is below if that can be easily modified to do it. I'm still picking up CSS so go easy

    CSS
    Code:
    HOVER VERTICAL
    .navigation ul {
    margin:0px;
    padding:0px;
    }
    .navigation li { 
    display:inline;
    height:30px;
    list-style:none;
    margin-left:15px;
    margin-right:15px;
    }
    .navigation li a {
    text-decoration:none;
    }
    .navigation li a:hover {
    text-decoration:underline;
    }
    .navigation li ul {
    margin:0px;
    padding:0px;
    display:none;
    display:inline-block;
    height:30px;
    float:left;
    list-style:none;
    margin-left:15px;
    position:relative;
    }
    .navigation li:hover ul
    {
    display:block;
    width:160px;
    }
    .navigation li li {
    list-style:none;
    display:list-item;
    }
    HTML
    Code:
    <li><a href="index.html">HOME</a>
    
    </li>
    
    <li><a href="about/about.html">ABOUT</a>
    </li>
    
    <li><a href="gallery/gallery.html">GALLERY</a>
    <ul>  
    <li><a href="gallery/weddings.html"><FONT style="BACKGROUND-COLOR: black">WEDDINGS</FONT></a></li>
    <li><a href="gallery/architecture.html"><FONT style="BACKGROUND-COLOR: black">ARCHITECTURE</FONT></a></li>
    <li><a href="gallery/entertainment.html"><FONT style="BACKGROUND-COLOR: black">ENTERTAINMENT</FONT></a></li>
    <li><a href="gallery/portraiture.html"><FONT style="BACKGROUND-COLOR: black">PORTRAITURE</FONT></a></li>
    <li><a href="gallery/landscapes.html"><FONT style="BACKGROUND-COLOR: black">LANDSCAPES</FONT></a></li>
    <li><a href="gallery/other.html"><FONT style="BACKGROUND-COLOR: black">OTHER</FONT></a></li>
     </ul> 
    </li>
    
    <li><a href="contact/contact.html">CONTACT</a>
    
    </li>
    
    <li><a href="partners/partners.html">PARTNERS</a>
    
    </FONT>
    
    </li></ul></div> 
    
    </ul>
    </div>
    </div>
    <!-- End Menu -->


    Cheers!
    It's work perfectly. Thanks for sharing the css drop down menu.

  11. #10
    gtg93's Avatar
    Join Date
    May 2010
    Posts
    319
    Thank Post
    187
    Thanked 41 Times in 33 Posts
    Rep Power
    15
    As above, that did the job! Thanks

SHARE:
+ Post New Thread

Similar Threads

  1. drop down menu in php
    By walkden-high in forum Coding
    Replies: 5
    Last Post: 1st September 2010, 01:17 AM
  2. Adding delay to drop-down menus in Joomla 1.5 EduGeek package
    By Minkus in forum EduGeek Joomla 1.5 Package
    Replies: 0
    Last Post: 2nd February 2010, 02:17 PM
  3. Drop down menu alignment
    By elanalazar in forum EduGeek Joomla 1.5 Package
    Replies: 0
    Last Post: 4th November 2009, 08:02 PM
  4. Drop Down Menu Apple Style
    By neilmc in forum EduGeek Joomla 1.0 Package
    Replies: 0
    Last Post: 5th October 2009, 03:35 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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