ir arriba

08 abril 2007

Menu modificable " CSS "

Gema no se si querias este menú, o la "textarea en css o scroll" el de categorias que esta a la izquierda, te pongo los dos: si es algo más ya me lo dirás...

Textarea o scroll:


MENU:



Código CSS: pegar debajo del <head>

<style type='text/css'>
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 9pt;
color: white;
}
#menu div.barraMenu {
text-align: left;
}
#menu div.barraMenu a.botonMenu {
background-color: #CCCCCC;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.barraMenu a.botonMenu:hover {
text-decoration: underline overline; color: red;
}
#menu div.barraMenu a.botonMenu:active {
background-color: #CCCCCC;
color: white;
}
</style>


Código HTML:

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href=" url ">enlace1</a>
<a class="botonMenu" href=" url ">enlace2</a>
<a class="botonMenu" href=" url ">enlace3</a>
<a class="botonMenu" href=" url ">enlace4</a>
<p></p></div></div>


Para modificar el menu (código css)

font-family: sans-serif, Verdana, Arial;---> ( para modificar la fuente )

font-size: 9pt; ---> ( tamaño de la fuente menú )

color: white;----> ( color de la fuente "texto" )

text-align: left; ----> ( aliniar menu )

background-color: #CCCCCC; --->( color de fondo "menu" )

color: white;-----> ( color de la fuente "texto menu" )

cursor: pointer; ----> ( cursor al seleccionar menu )

padding: 4px 6px 2px 5px; ----> ( modificar ancho-largo menu )

text-decoration: underline overline; color: red; --->( efecto dos rayas al seleccionar vínculo + color )

background-color: #CCCCCC;----> ( color de fondo menú al activar vínculo)

color: white; --->( color de la fuente al activar menu )

Nota: Este menú es el que uso yo, el código HTML lo coloque en
Plantilla + elementos de la página + Añadir y organizar elementos de la página + añadir elementos en página.

Feliz día Gema y demás blogueros, saludos

4 comentarios:

Gem@ dijo...

Muchas gracias JOSCCAT ha sido todo un detalle, en realidad no es lo que yo pensaba ya que lo que busco es unos botones para cambiar los de mis categorías.
Verás los míos enlazan con las categorías que se van asignando, y los tuyos con las que tienes en la sidebar.
De todas formas me ha venido muy bien ver los ejemplos que has puesto, y voy a hacer unas pruebas partiendo del primer ejemplo.
Gracias de nuevo has siso muy amable ;)

Josscat dijo...

A tí Gema, cualquier consulta aquí estoy, y mil gracias por añadirme en tu blog, una pregunta tienes el código de traducir páginas en inglés como el q tienes arriba a la derecha de tu blog?
Saludos

Gem@ dijo...

Claro que si, la traducción la hice en Google y la añadí a este código que te añado:
(He añadido la url de tu blog ya traducido, espero que salga el código entero, copia y pega lo que está en negrita si no resulta me lo dices y te lo mando a tu mail)
<center><a href="http://translate.
google.com/translate?u=
http%3A%2F%2Fjosscat.blogspot.com
%2F&langpair=es%7Cen&hl=
es&ie=UTF-8&oe=UTF-8&prev=%2
Flanguage_tools"><img width="35" src="http://img337.imageshack.
us/img337/6091/flagukgb1.jpg"
/> <height = 28/></height></a>
</center>

(Modifica el tamaño de la imagen si así lo deseas)

Josscat dijo...

Gracias Gema ya lo he puesto, eres un sol ;-) besos mil

© josscat.blogspot.com 2007