popout buttons

S

Sabooru

New Member
Hi there
I'm a noob at coding but will have a crack at anything

At the moment I really need your help.

I have a menu that I've designed at the moment but I want to replace it with a new cleaner, simpler design.
(At the moment it is a colourful flash menu but very busy)

What I'm trying to do now is to have the menu work so that when a button is moused-over the image pops down a bit so it sticks out from the rest of the menu.
~(almost like a dropdown menu, however it is just the button that pops out)


I've got two elements to the button which is the button (Lower.png)
and the bit that I want to appear and push the button down (Upper.png)
so that it is essentially like a tab that sticks out.

I tried various combinations of mouseover but the problem I found every time was that I would need to recreate the code for the elements every time to create a new button AND create multiple different lower-parts with the name of each page linked (Home, Photos, News etc...).

Also I don't think its efficient to use the entire code for a popdown MENU when all I want is the buttons to pop down by theirself with no extra links, when its rolled over at least for the moment.

Diagram:
--v------

I think I will be able to tackle the automatic creation of page buttons when I add a new page to the list. What I was thinking was some kind of PHP program + GD to dynamically create each menu button from a pread external url list. I have a similar thing with a gallery that pulls its info-section for each photo from the list.
or I was going to create them in in CSS somehow so the text is available for spiders as well.

Any help or ideas?
Any info that you need me to supply if I haven't explained it properly?
Thankyou!


EDIT: I've been looking around and still finding that all the rollover tutorials require the images to keep their constraints. Can't find a single one that juts out of its original position.
 
Last edited:
smoovo

smoovo

New Member
Welcome!

If i understand you correctly, you looking for clean code for your new clean designed menu. The code should replace existing image (menu button) with another, while you mouse over it.

To do this kind of job, and to do it clean, you should use "Sprites". Sprites is an image contains all the images for your all buttons. In default mode it shows one area, and at action it changes.

Read more in this tutorial http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/. Try to understand everything, and then you will be able to custom it for your own needs.

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
S

Sabooru

New Member
Hmm from looking at that tutorial it seems the hot-button and the original button still required to be the same size constraints rather than the button popping down (and out of the original position by inserting another .png above the button).

I can't find any examples on the net but I have seen it before. Rather like tabs that pop out when you mouse over them.

If need be I will create a version in flash that will demonstrate what I want to do, and then ask how it would be created using codes.


EDIT:::::

http://megaswf.com/simple_serve/63196/

this is what I am trying to achieve only through code and not through flash.
See how the buttons pop down. they dont follow their original size constraints. The whole piece will be a hotlink.

I considered just having swap images but that means I have to have a different image for EVERY link mouseover and mouseoff which would be taxing on the load time.
 
Last edited:
smoovo

smoovo

New Member
Maybe jQuery will help you, because you are looking for something beyond HTML/CSS ability.

Try to search for "jquery menues" on Google. One of the results is this menu.

If it's not that, please post screenshot of that two states you need.

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
S

Sabooru

New Member
this is a flash simulation

http://megaswf.com/simple_serve/63196/

ill also do a screen shot of these states
st1st2.jpg


that jquery menu does look very cool.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I would avoid flash for navigation. And what you are asking is fully achievable through CSS. Smoovo had it right when mentioning image sprites. That will be your best solution.

I will create an an example for you.
 
Last edited:
smoovo

smoovo

New Member
Solution

Here is my solution for you. Use sprite and "hover", and just make sure to make buttons cut in Photoshop.

I made demo page in my website - DEMO.

The HTML

HTML: 
<div class="pop_menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</div>


The CSS

HTML: 
.pop_menu {
    width:300px;
    height:50px;
}

.pop_menu a {
    width:100px; 
    height:42px; 
    float:left; 
    background:url('buttons.png') 0 -50px no-repeat; 
    text-align:center; 
    padding-top:8px; 
    color:#000; 
    text-decoration:none;
}

.pop_menu a:hover {
    height:20px; 
    background-position:0 0; 
    padding-top:30px; 
    text-decoration:none;
}


The Image

buttons.png



Let me know if it helped - Enjoy.


____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
Here you go:
(image sprite attached)

Markup
HTML: 
<ul class="menu">
    <li><a href="#" class="photo"><span></span>photos</a></li>
    <li><a href="#" class="video"><span></span>video</a></li>
</ul>

CSS
Code: 
* {
margin:0;
padding:0;
}
ul.menu {
	width:300px;
	margin:100px auto;
	padding-left:100px;
	border-top:solid 5px #898989;
}
ul.menu li {
	margin:0 2px;
	float:left;
	list-style:none;
}
ul.menu li a {
	position:relative;
	display:block;
	text-align:center;
	color:#333;
	font: normal 12px/20px Arial, Helvetica, sans-serif;
	text-decoration:none;
	width:100px;
	height:50px;
	background-color:#fff;
}
ul.menu li a:hover {
	background-color:#898989;
	line-height:85px;
}
ul.menu li a span {
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:30px;
}
ul.menu li a:hover span {
	top:auto;
	bottom:0;
}
ul.menu li a.photo span, ul.menu li a.video span {
	background:#898989 url(btn_sprite.png) 0 0 no-repeat;
}
ul.menu li a.video span {
	background-position:0 -30px;
}
 

Attachments

  • btn_sprite.png
    btn_sprite.png
    2.2 KB · Views: 32
PixelPusher

PixelPusher

Super Moderator
Staff member
smoovo said:
Here is my solution for you. Use sprite and "hover", and just make sure to make buttons cut in Photoshop.

I made demo page in my website - DEMO.

...

Let me know if it helped - Enjoy.


____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
Click to expand...

There is no need for that many nested divs. Use the anchor tag <a>, that's its intended purpose. Also the psuedo class "hover" will only work on an anchor in IE6. If you use it on anything else, you will need to include a javascript function.
 
S

Sabooru

New Member
awesome. yeah I like your styles smoovo ;)
worked a treat on our site and helped me out a lot.

which parts did you change for IE 6?
 
You must log in or register to reply here.
Top