1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Menu question...

Discussion in 'CSS' started by le007, Sep 12, 2007.

0
  1. #1
    Hey all,
    regardless of the hierarchy part of the menu - does anyone know how to get a menu
    # to "bounce" or "move" down like the top right menu in this website? Its links are "What's New, Showcase, Download etc."

    http://smoothgallery.jondesign.net/

    I think its done using http://smoothgallery.jondesign.net/a...ripts/pages.js

    Anyone know how to do it with just CSS?

    Thanks,
    Le007
     
    le007, Sep 12, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    He surely does the timing with Javascript.

    In Css, the change would be abrupt like other hover qualities.

    Under the :hover part of the CSS, either add top margins or change it's position, whichever is easier in your particular case (if you've floated, add margin; if they're just relatively positioned I think you could have a different top and left number).
     
    Stomme poes, Sep 12, 2007 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Hey man, thanks for the quick reply.

    Yeah I was thinking about both... the hover would look "chunky" I think? I don't have the menu positioned at all - its simply a test page I was playing around with and the menu I created is just in a top div.

    I added top margins, and it didn't really have the affect - I mean the menu didn't "move down" if you like, the top margin just grew a few pixels...
    If I change its relative position I suppose it'd move down - I think top margin is easier but the margin "grows" above the menu, rather than "pushing" the hovered link down... any further suggestions?
     
    le007, Sep 12, 2007 IP
  4. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sure. You can do it fairly easily with the hover pseudo-class selector.

    Define the a:link part to be the menu. Then define the a:hover part to be the menu expanded. If you want to animate it use a Gif89a background image on hover. Write your styles for a:active and a:visited, too.

    Write it as a class then add the class to each link. Or wrap it in a div. Or wrap it in a span. Whatever works for your layout needs.

    Google up "CSS hover" and you'll get all the tutorials you could ever want on writing these things.
     
    qube99, Sep 12, 2007 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Alright man, yeah I'll give it a go and see - I just want something that looks exactly like that. I think margin-top on the hover is my best shot.

    Thanks goys!
     
    le007, Sep 12, 2007 IP
  6. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #6 
    <html>
<head>

<style>


ul#navlist
{
margin-left: 0;
padding-left: 0;
margin-bottom:5;
margin-top:5;
white-space: nowrap;
font-family: arial;
font-size:12px;
line-height:14px;
font-style:strong;

}

#navlist li
{
display: inline;
list-style-type: none;

}

#navlist a { padding: 0px 11px; }


#navlist a:link, #navlist a:visited
{
color: #2689BC;
background-color: white;
text-decoration: none;
}

#navlist a:hover
{
margin-top: 60;
color: #fff;
background-color: #369;
text-decoration: underline;
}

</style>
</head>

<div id="navcontainer">
		<ul id="navlist">
		<li id="active">

		<a href="index.html" title="home" id="current" >HOME</a></li>
		<li><a href="test" >test</a></li>
		<li><a href="test" >test</a></li>
		<li><a href="test" >test</a></li>
		<li><a href="test">test</a></li>
		<li><a href="test">test</a></li>
		<li><a href="test">test</a></li>
		</ul>
	</div>
    Code (markup):
     
    le007, Sep 12, 2007 IP
  7. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7 
    #menu a, #menu a:visited {
  position:relative;
  text-decoration:none; 
  text-align:center; 
  background-color:#9ab; 
  color:#fff; 
  display:block; 
  width:120px; 
  border:2px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.25em;
  margin:0 auto;
  }

#menu a:hover {
  top:2px;
  left:2px;
  color:#fff;
  border-color:#345 #cde #def #678;
  }

**********************************************

<div id="menu">
  <a href="menu1.html">Link1</a>
  <a href="menu2.html">Link2</a>
  <a href="menu3.html">Link3</a>
  <a href="menu4.html">Link4</a>
  <a href="menu5.html">Link5</a>
</div>
    Code (markup):
     
    qube99, Sep 12, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I hope you're using a proper and complete DOCTYPE with that, because if you aren't, you're going to be forcing the browsers to guess what you're trying to do.

    Furthermore, I strongly suggest you use an unordered list with an ID of "menu" instead of a DIV and the links. Think about it, what do you have there? A list of links. Therefore you should mark it up as such.
     
    Dan Schulz, Sep 12, 2007 IP
  9. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #9
    Hey qube99,
    Thanks heaps for the reply - nice menu although I was looking for something horizontal that just changed the margins so it would "bounce" when hovered.

    Dan, yeah I use doctypes - just testing I didn't. I don't get u as regards not using a div?
     
    le007, Sep 13, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    What you have is a list of links. They should be marked up as such.

    
<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>
    Code (markup):
     
    Dan Schulz, Sep 13, 2007 IP
  11. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #11
    They are, look at my original code...
     
    le007, Sep 13, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Ah, I only looked at post #7. Anyway, you still don't need the DIV around it. :)
     
    Dan Schulz, Sep 13, 2007 IP
  13. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #13
    No probs - but I just read stuff easier inside divs - I suppose its personal code practice. I get you though :)
     
    le007, Sep 13, 2007 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I ended up using a div around a menu after fighting it without-- but that was in the instance of using someone's code which had a div-- so all my ul and li names were off by one and I couldn't find my errors : (

    But normally, you can give the main ul a class, list the class in your css like normal, instead of giving the class to the div.
     
    Stomme poes, Sep 13, 2007 IP
  15. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #15
    I prefer using a div fullstop :)
     
    le007, Sep 14, 2007 IP
  16. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    You'd need to tweak it a bit for a horizontal layout. I was basically just demonstrating how to shift position on hover. You change size the same way, just add your new size to the a:hover pseudo-class.

    Whether you use a div container or a ul container makes very little difference. Either way, just add a float:left for a horizontal layout.

    You should be aware the IE6 has a parsing bug for some types of ul content that use hover, but using it on a hyperlink inside a ul is no problem.
     
    qube99, Sep 15, 2007 IP
  17. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #17
    At its core, HTML is a structural markup language, and by marking up the sections of your site appropriately, you'll be identifying what they are, which will make it easier for people using screen readers to identify what your menu is (among several other things).

    That's one of the main reasons why I suggested marking that list of links as a list, not a DIV full of links. Another reason being that it's easier to style - especially if you change the layout later on.
     
    Dan Schulz, Sep 15, 2007 IP