WEB $40 paypal for some CSS help? :(

Discussion in 'OT Technology' started by shaitaan, May 29, 2008.

  1. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
  2. TheDarkHorizon

    TheDarkHorizon \xC0\xFF\xEE

    Joined:
    Sep 26, 2002
    Messages:
    2,396
    Likes Received:
    0
    Location:
    San Francisco, CA
    They use a combination of JavaScript and CSS for the implementation. Do you want a pure CSS solution?
     
  3. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    add a sublist like this for each menu item in the html..
    Code:
    <li>
    	<a href="#" id="menu7" accesskey="7" title=""><strong><span>N</span></strong></a>
    	<ul>
    		<li><a>n-1</a></li>
    		<li><a>n-2</a></li>
    		<li><a>n-3</a></li>
    	</ul>
    </li>
    
    
    and then add this to the css. probably want to change the positioning a bit to fit it how you like
    Code:
    #menu ul li ul {
    	margin: 0;
    	padding: 112px 0px 0px 0px;
    	list-style: none;
    	position: relative;
    }
    
    #menu ul li ul li {
    	display: none;
    	float: left;
    	height: 33px;
    	padding-right: 10px;
    }
    
    #menu ul li:hover ul li {
    	display: block;
    }
    
     
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    or maybe use something like this

    Code:
    #menu ul li a:hover ul li {
    	display: block;
    }
    in the CSS instead.. since I don't think the other way would work in older versions of IE
     
  5. gobbles

    gobbles .

    Joined:
    May 6, 2006
    Messages:
    422
    Likes Received:
    0
    I'm tappin' this. give me a minute :wiggle:
     
  6. gobbles

    gobbles .

    Joined:
    May 6, 2006
    Messages:
    422
    Likes Received:
    0
  7. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC

    this was the kinda thing i was lookin for, but yeah - need IE compatibility too :( :o

    trying the other suggestions when i get to work....
     
  8. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    also..is there a way to do this on an onClick instead of when they hover? :o
     
  9. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    nah not necessarily; js is fine too
     
  10. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
  11. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    uppin to $50 if someone can help me fig. this out today :hs: gotta push a new site out tonight.....
     
  12. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    if you want it with onclick there are a lot of possibilities

    in the head add
    Code:
    <script src="menuEffects.js"></script>
    
    on each menu link..
    Code:
    onclick="showSubMenu('subN')"
    
    Code:
    onclick="showSubMenu('subCreateGraphics')"
    
    Code:
    onclick="showSubMenu('subFreeTrial')"
    
    etc

    inside each menu <ul> > <li> under the <a></a> add another <ul> for the second menu and give them id's

    make a file called menuEffects.js that contains
    Code:
    function showSubMenu(targetUl) {
    	/* hide all submenus */
    	document.getElementById('subN').style.display = 'none';
    	document.getElementById('subCreateGraphics').style.display = 'none';
    	document.getElementById('subFreeTrial').style.display = 'none';
    	document.getElementById('subPurchase').style.display = 'none';
    	document.getElementById('subSupport').style.display = 'none';
    	document.getElementById('subCompany').style.display = 'none';
    	document.getElementById('subCommunity').style.display = 'none';
    
    	/* show selected submenu */
    	document.getElementById(targetUl).style.display = 'block';
    }
    
    I've tested it and it works.
     
    Last edited: May 29, 2008
  13. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
  14. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    oops I forgot something in it.. hold on it'll work in a second
     
  15. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    ok everything works now
     
  16. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    very cool man, thanks - in my browser, the tabs are spacing each other out when the submenu appears; is that happening for you?

    is there any way to prevent that? :)
     
  17. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    ah yeah I just noticed that. I thought it was something to do with the background images that I hadn't copied yet, but it's not

    gimme a sec, there are a lot of possibilities, just gotta find the one that works the best
     
  18. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
  19. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    you rock man, thank you

    ONE last thing, i promise - in FF, the nav and sub is positioned left

    in IE, nav is left, submenu is centered


    could you make 'em both centered for me? :hs: that should be it :)
     
  20. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    done.

    there wasn't a width set for the page, so margin auto wasn't centering properly for everything.

    I added a container div around everything and gave it a set width so now it's fine


    http://halefx.com/temp/homepage.html
     
  21. ROFLCORE

    ROFLCORE Guest

    Why not have the submenu appear directly under each tab, where it belongs, on hover and not on click?

    I'll let halefx handle it.
     
  22. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC

    I was going for the look that they have here:

    www.volusion.com

    nice, big, clickable submenu text and buttons.
     
  23. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    Hale, do you know how to do an if-then in php to let me have 1 header.php include file, but specify which tab is highlighted based on page url?
     
  24. Browning

    Browning Active Member

    Joined:
    Feb 14, 2005
    Messages:
    89,465
    Likes Received:
    10
    the on click doesn't look to good by the way. Should have went with the hover:o
     
  25. ROFLCORE

    ROFLCORE Guest

    Oh right on. :cool:
     

Share This Page