Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: Interesting technique to make a menu with images  (Read 5639 times)

bramsyuur

  • Hero Member
  • *****
  • Karma: 23
  • Posts: 873
    • http://snews.vietbee.net
Interesting technique to make a menu with images
« on: April 09, 2006, 06:40:41 pm »

Hi to all!  :)
I've found an, for me, interesting technique to make a menu with images and not preloading these.
It's really fast and simple and compatible with all browsers.

Here the demo/example url:

http://tutorials.alsacreations.com/modelesmenus/g02.htm

And here the html code:

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>A multiple hovering menu without image preload</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS from tutorials of www.alsacreations.com/articles */
body {
background: #000;
}
ul, li { /* list use for the menu  */
list-style-type: none; /* suppression of list markers */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionning for IE5 and IE5.5 */
top: 0;
left: 100px;
background: transparent url(g02/fondmenu.jpg) top left no-repeat; /* general menu background */
width: 360px;
text-align: center;
}
li {float: left;}

li a { /* buttons dimensions and definitions */
display: block; /* <a> placed in block to give it dimensions */
height: 420px;
width: 60px;
color: #fff;
font-size: 14px;
line-height: 50px; /* line height to avoid paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}
li a:hover {
background: transparent url(g02/fondmenu.jpg) top left no-repeat;
}
a#menu1:hover {
background-position: -360px 0%; /* background place offset for each button */
}
a#menu2:hover {
background-position: -420px 0%;
}
a#menu3:hover {
background-position: -480px 0%;
}
a#menu4:hover {
background-position: -540px 0%;
}
a#menu5:hover {
background-position: -600px 0%;
}
a#menu6:hover {
background-position: -660px 0%;
}

-->
</style>
</head>
<body>
<ul>
<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>

<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>
<li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>

<div style="position: absolute; bottom:0; left:20px; color:white">
<h1 style="font-size: 1.6em; margin: 0 0 5px 0">A single image for the whole menu and no preload! </h1>

<p>Raphaël GOETTER - www.alsacreations.com - <a style="color:white" href="http://tutorials.alsacreations.com/rollover_unique/">Explanations</a></p>
</div>

</body>
</html>

(ADMIN NOTE: The sample image for the rollover menu (with no preloading) is no longer available).

I hope this helps for learning about css a bit for those like me that don't know much css.  ;)
Best regards,
bram.

« Last Edit: February 15, 2011, 06:10:47 pm by Keyrocks »
Logged
La comunidad sNews en tu idioma!
Comunidad sNews en Español

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Interesting technique to make a menu with images
« Reply #1 on: April 09, 2006, 06:43:08 pm »

That's real nice, bram...Good work. More fun to watch and learn from can be found at Stu Nichols site: http://www.cssplay.co.uk/ Check out the menu's there...
Logged
"It's only dead fish that goes with the flow... "
Updated

bramsyuur

  • Hero Member
  • *****
  • Karma: 23
  • Posts: 873
    • http://snews.vietbee.net
Interesting technique to make a menu with images
« Reply #2 on: April 09, 2006, 06:51:17 pm »

Hi Patric,  ;D
Stu Nichols site, Great reference!!! Thanks a lot, mate!!!  ;)
bram.

Quote from: Patric
That's real nice, bram...Good work. More fun to watch and learn from can be found at Stu Nichols site: http://www.cssplay.co.uk/ Check out the menu's there...
Logged
La comunidad sNews en tu idioma!
Comunidad sNews en Español

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Interesting technique to make a menu with images
« Reply #3 on: April 10, 2006, 12:41:48 pm »

De nada :)
Logged
"It's only dead fish that goes with the flow... "
Updated

bramsyuur

  • Hero Member
  • *****
  • Karma: 23
  • Posts: 873
    • http://snews.vietbee.net
Interesting technique to make a menu with images
« Reply #4 on: April 10, 2006, 02:15:48 pm »

 ;) Tu link ha sido de mucha ayuda para mi! (Your link has a great help for me!)
Gracias compañero! (Thanks mate!)
bram (yo  ;D)

Quote from: Patric
De nada :)
Logged
La comunidad sNews en tu idioma!
Comunidad sNews en Español

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Interesting technique to make a menu with images
« Reply #5 on: April 10, 2006, 02:27:18 pm »

lol... you're not spanish, are you ?  I don't know spanish at all, but I would like too, it's a beautiful language. Comprende. Mi padre es un loco, et mi madre es una pu.... Hehe, no way.
Logged
"It's only dead fish that goes with the flow... "
Updated

bramsyuur

  • Hero Member
  • *****
  • Karma: 23
  • Posts: 873
    • http://snews.vietbee.net
Interesting technique to make a menu with images
« Reply #6 on: April 10, 2006, 07:43:12 pm »

 ;D lol
Yeah, but more beautiful is Catalan language "la meva llengua materna" (My mother language)  :P

Quote from: Patric
... it's a beautiful language. Comprende. Mi padre es un loco, et mi madre es una pu.... Hehe, no way.
Logged
La comunidad sNews en tu idioma!
Comunidad sNews en Español

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Interesting technique to make a menu with images
« Reply #7 on: April 11, 2006, 07:32:24 am »

It's a really nice landscape, and great people in Catalonia. I have my mother and father living in Spain. But further down south. They live outside a small village called Canillas de Aceitunos just north of Velez Malaga...Staying there is plain death, hehe... It's beautifull, no doubt about that, but not fun at all...To far from civilization. Part of my wishing to be able to speak Spanish
Logged
"It's only dead fish that goes with the flow... "
Updated

mejobloggs

  • Full Member
  • ***
  • Karma: 0
  • Posts: 125
Interesting technique to make a menu with images
« Reply #8 on: May 29, 2006, 04:18:35 am »

:)

Sorry, way off the original topic..

What is the difference between Spanish and Catalan?

I did beginner Spanish for 3 years, and got fairly decent with it. Lovely language... Unfortunately I have never used it, and I have forgotten most :(
Logged

bramsyuur

  • Hero Member
  • *****
  • Karma: 23
  • Posts: 873
    • http://snews.vietbee.net
Interesting technique to make a menu with images
« Reply #9 on: May 29, 2006, 12:11:13 pm »

Hi Mejobloggs!
Well, they are a lot of differences in these two languages, but are in the same country.
In Spain, 3 languages are used in different geographical zones, for example:

- In Catalunya: Catalan Language  
- In Galicia: Galego Language
- In Pais Vasco: Euskera Language

To know the diference about catalan and spanish/castellano language, here an
lexical example of a phrase:  

"Me gustó el plato de paella que almorcé ayer" --> Spanish/Castellano
"Em va agradar el plat de paella que vaig dinar ahir" --> Spanish/Catalan

It's the same? :P
Thanks,
bram.

Quote from: mejobloggs
:)

Sorry, way off the original topic..

What is the difference between Spanish and Catalan?

I did beginner Spanish for 3 years, and got fairly decent with it. Lovely language... Unfortunately I have never used it, and I have forgotten most :(
Logged
La comunidad sNews en tu idioma!
Comunidad sNews en Español