SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Submenus

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submenus

    For a website I'm working on the owners would like to have similar submenus as on this website. Can somebody please tell me how this is done? I'm sure it is Javascript or jQuery. I have been on Google for neary 4 hours now but only could find sollutions for one single div, where I need sub menus for at least 5 menu items. Any help from a forum guru would be highly appreciated.

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submenus

    I have to make similar submenus as on this website Is this possible with just CSS or do I need something as Javascript or jQuery as well?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3

  4. #4
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As far as I can tell, it uses jQuery and sizzlejs:

    http://sizzlejs.com/

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,448
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    The example is done with JavaScript - and the submenus don't work at all for anybody with JS disabled. For my money, you'd be much better off with a pure CSS version.
    Don't serve your porridge and then go out for a walk.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's most definitely doable with only CSS. I'll see what I can come up with.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spritanium View Post
    It's most definitely doable with only CSS. I'll see what I can come up with.
    No need to reinvent the wheel . Ralph provided numerous links.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thank you a lot ralph for the links. They were very helpful. There is one thing which I can't figure though!!! The sub menu's background should go over the entire width of the screen, but the actual content from the menus should not be wider then 1000px. I have no idea how to do that? Any help would be highly appreciated
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Could you show us what you have so far? That way we can give specific code for your situation.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Well you couldh ave a setup like this (we can go from your original example and give you exact code then)

    <div width 100% with background>
    <menu who is 1000px, (centered?)></menu>
    </div>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the suggestion of RyanReese to use dive very smart one but I am afraid that I don't know how to use it in an appropriate way. this is what I have so far.
    Code:
    html, body {
    	width: 100%;
    	height: 100%;
    }
    
    body {
    	background: #AAA;
    }
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    ul, ol, li {
    	list-style: none;
    }
    
    #menu {
    	 width:100%;
       float:left;
       background:#fff;
       overflow:hidden;
       position:relative;
    	 z-index: 100;
    }
    
    #menu ul {
       clear:left;
       float:left;
       position:relative;
       left:50%;
       text-align:center;
    }
    
    #menu ul li {
       display:block;
       float:left;
       list-style:none;
       position:relative;
       right:50%;
    }
    
    #menu ul li a {
       display:block;
       margin:0 0 0 1px;
       padding:3px 10px;
       color:#000;
       text-decoration:none;
       line-height:1.3em;
    }
    
    #menu ul li a:hover {
       color:#ff0000;
    }
    
    #menu ul li.accommodation,
    #menu ul li.discover,
    #menu ul li.prices,
    #menu ul li.contact {
    	width: 0;
    	height: 0;
    	position:absolute; 
    	left: -9999px; 
    	top: -9999px;
    }
    
    #menu ul li:hover .accommodation,
    #menu ul li:hover .discover,
    #menu ul li:hover .prices,
    #menu ul li:hover .contact {
    	width: 100%;
    	height: 60px;	
    	top: 60px;
    	background: #CCC
    }
    HTML Code:
    <div id="menu">
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Accommodation</a>
        	<div class="accommodation">
          
          </div>
        </li>
    		<li><a href="#">Gallery</a></li>
    		<li><a href="#">Discover</a>
        	<div class="discover">
          
          </div>    
        </li>
    		<li><a href="#">Bookings</a></li>
    		<li><a href="#">Prices &amp; Avalability</a>
        	<div class="prices">
          
          </div>    
        </li>
    		<li><a href="#">Travel</a></li>    
    		<li><a href="#">Contact</a>
        	<div class="contact">
          
          </div>     
        </li>
    	</ul>
    </div>
    It is obvious that this is wrong because the 100% I use for the submenus is related to the parent li, but I have realy no idea what other approach to take.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just noticed in Paul's example is that he is using #nav li ul li and #nav li ul ul and that is confusing me somehow (I see the logic but don't know how to convert it to my situation). I thought using a div as RyanReese suggested would be the most appropriate way for me since all 4 submenus will have a different structure
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

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