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
    1,963
    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
    1,963
    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
    5,342
    Mentioned
    214 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 be arrogant. Be kind to a koala that thinks it's a bear.

  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,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    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
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 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,564
    Mentioned
    6 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>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    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
    1,963
    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
  •