Maquetación de Páginas Web - Crear Un Menu Horizontal Con CSS - Ejemplos HTML y XHTML

15/11/2016 Maquetacindepginasweb:crearunmenuhorizontalconCSS::EjemplosHTMLyXHTML
DiseodePginasWebenMadrid,Espaa.Comohacerunapginaweb.PortaldelDiseadorWeb::LaWebera.es
Manuales
Ejemplos
Cursos
Notas
LaWebera.es>Comohacer>EjemplosHTMLyXHTML>Maquetacindepginasweb:crearunmenu
horizontalconCSS
Escribeeltextoabuscar Buscar

Maquetacindepginasweb:crearunmenu
horizontalconCSS
Actualizadoel05/10/2013<>11Cometarios
Resumen:Hayvariasformasdepresentarunmendenavegacinenunapginaweb.Enesteartculo,presentamos
laformadehacerunmenhorizontalrealizadoconunalistaflotante.
Losmenssonunaparteimportantedeldiseodeunapginaweb,debidoaquecolaboraengranmedidaenla
usabilidaddelapgina.
Todapginawebdebecontarconalmenosunmenquepermitaalosusuariosdesplazarseporlasdiferentes
pginasenformagilysencilla.
Losmenspuedenubicarseenvariospuntosdelapgina,aunquelosmsusadossondebajodelacabecera,
encimadelamisma,yenunacolumnalateral,preferentementealaizquierda.
EnLaWebera.essehaexplicadoanteriormentecomohacerdistintostiposdemens,puedesconsultarlosartculos:
MensysubmensconCSS,mendesplegableconCSSymenudesplegableconXHTMLyCSS.
MenrolloverconCSSyunasolaimagen.
Preparacin
Acontinuacin,desarrollaremosunmenubicadoencimadelacabeceradelapgina.Paraseguirlosejemplos,
deberncontarconunpackdeimgenes,quepodrndescargardesdeaqu.
Descargarimgenes
Vistadelejemploterminado
Paraqueveanelejemploquevamosarealizaraqutienenunacapturadeimgendelresultadofinal:
Yparaverloenaccinpuedenpincharaqu:menhorizontalconCSS.
CreandolaestructuradeldocumentoHTML
http://www.lawebera.es/comohacer/ejemploshtmlxhml/maquetarpaginaswebcrearmenushorizontales.php 1/9
Enprimerlugar,estableceremoslaestructuradelosarchivosqueemplearemos.Elejemploserrealizadoenuna
pginaquellamaremosindex.htmlyquedesarrollaremosenXHTML1.1.Estearchivoseencontrarenlaraz
delsitio,juntoadosdirectoriosquellamaremosarchivoseimagenes.Enelprimerocolocaremosunarchivo
CSSquedenominaremosestilo.css,mientrasqueelsegundoeselmismodirectorioquedescargaronenel
archivocomprimido.
Asqueenelencabezadodeldocumentohtml,colocaremoslassiguienteslneas:
1 <?xmlversion="1.0"encoding="iso88591"?> ?
2 <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="es">
5 <head>
6 <title>Pginadeejemplo</title>
7 <metahttpequiv="ContentType"content="text/html;charset=iso88591"/>
8 <metahttpequiv="ContentStyleType"content="text/css"/>
9 <metahttpequiv="Language"content="Espaol"/>
10 <linkrel="stylesheet"type="text/css"href="archivos/estilo.css"/>
11 </head>
12 <body>
Comosepuedever,sehacolocadoellinkquevinculalapginaconunarchivoCSSqueestubicadoenun
directorioarchivos,elcualdeberemoscrearycolocarensuinteriorelmencionadoarchivo.
Comenzandoconlaelaboracindelsitio,enprimerlugarubicaremosunacapacontenedora(<div>)de900pxyla
centraremos.
Mensuperior
AlosefectosdecomprendercomoseconstruyeunmensencillomaquetadoconHTMLyCSStienepoca
relevanciasielmismoseencuentraubicadoencimadelencabezadoopordebajodeeste,porloqueloubicaremos
debajodelencabezadoydiremosqueparaquequedeporencimadelencabezado,bastarconubicarlaslneasde
cdigodelmenporencimadelasdelencabezado.
Asqueenelcasodelejemplo,comenzaremosporubicarelencabezadoydarlelosformatosacadaunodesus
componentes.ElcdigoHTMLserelsiguiente:
1 <divid="contenedor"> ?
2 <divid="cabecera">
3 <h1>Pginadeejemplo</h1>
4 </div>
5 </div>
YelcdigoquehabremoscolocadohastaelmomentoenelarchivoCSS,serelsiguiente:
1 body{ ?
2 margin:0;
3 padding:0;
4 font:normal13pxarial,helvetica,sansserif;
5 }
6 #contenedor{
7 margin:0auto;
8 border:solid1px#aaa;
9 }
10 #cabecera{
11 height:120px;
12 background:url(../imagenes/fondo1.jpg);
13 }
14 #cabecerah1{
15 margin:0;
16 padding:25px;
17 font:bold50pxarial,helvetica,sansserif;
18 color:white;
19 }
19 }
Aquvemosqueenprimerainstanciahemoscambiadolascaractersticasdelapginapordefecto,eliminandolos
mrgenesyrellenos,ascomomodificandolafuente.Elsegundoprrafocontienelascaractersticasdel
contenedor.Losprrafostresycuatro,contienenlascaractersticasdelacabecerayelttulodelapgina.
Fondodelmenhorizontal
Enprimerlugar,sedebeestablecerunacapacontenedoradetodoslosbotonesdelmen,queademssirvepara
establecerelfondogrficodelmen,esdecir,queeslacapaquedarlaaparienciadeunabarrahorizontalque
ocupartodoelanchodelapgina.Paraello,luegodelaetiquetadecierredelacapadelacabeceradelapgina,
secolocarestacapaquecorrespondeelidentificadormenu.
EnelarchivoCSSsoloseestablecendospropiedades,laalturadelacapayelfondo.Comolaalturadelaimagen
defondocoincideconlaalturadelacapa,noesnecesarioespecificareltipoderepeticinquellevalaimagen.
Luego,colocaremosunanuevacapaembebidaenlaanterior,quetienelamismaaltura,peroqueenlugardeocupar
todoelanchodelacapacontenedora,solotendrunanchode481px.Aprimeravista,tieneunasdimensionesun
pocoextraas,peromsadelanteveremosporquseestableceestamedida.Estacapa,tienecomofondouna
imagensimilaraladelfondodelmen,peromsclara.Lafinalidaddeestacapa,eshacerdefondoenla
separacinquedejaremosentrelosbotones,loquesimularunseparadormsclaro,comoyaveremos.
EstanuevacapaestmarcadaenelarchivoCSScomo#fondomenu.Acontinuacin,mostraremoslaslneasdel
archivoCSSalasquenoshemosreferido:
1 #menu{ ?
2 background:url(../imagenes/botonmenu.jpg);
3 height:30px;
4 }
5 #fondomenu{
6 background:url(../imagenes/botonmenu3.jpg);
7 width:485px;
8 height:30px;
9 }
4 </div>
5 <divid="menu">
6 <divid="fondomenu">
7 </div>
8 </div>
9 </div>
Colocandolosbotonesdelmenu
Losbotonessonelementosdelista,queenestecaso,tienenunaextensinde120pxdeanchopor30pxdealtura.
Aestosbotones,lesdaremosunmargenizquierdode1px,conloqueaparecerelfondodelmen,formadopor
unaimagenmsclaraqueladelosbotones,porloqueestemargensimularlapresenciadeundivisor.
Esporestaraznquesehatomadoelanchodelacapadelfondode481px.Laoperacinquehemosrealizadoesla
siguiente:Sitenemos4botonesde120px,alosquelesdejamosunmargende1pxalaizquierda,aloque
debemossumar1pxmsparaquequedeunespaciomsclaroalfinaldelltimobotn,nosqueda:
(4x120px)+(4x1px)+1px=485px
Paraquelosbotonesquedenalineadosunoalcostadodelotro,debemosagregarlapropiedadfloatydarleel
valorleft.Ahora,debemosagregarundetalleaestemen,queesopcional,queeslaposibilidaddequelos
botonescambiendecolorcuandoelpunteropaseporencimadeellos.Paraello,bastarconcolocarlapseudoclase
:hoveralaclasedelosbotones,modificandosololaimagendefondo.
Teniendoencuentatodoloquehemosexpresado,loscdigosquedarandelasiguienteforma:
4 </div>
5 <divid="menu">
7 <ul>
8 <li><ahref="#">Itemuno</a></li>
9 <li><ahref="#">Itemdos</a></li>
10 <li><ahref="#">Itemtres</a></li>
11 <li><ahref="#">Itemcuatro</a></li>
12 </ul>
13 </div>
14 </div>
15 </div>
1 #fondomenuul{ ?
2 liststyle:none;
3 margin:0;
4 padding:0;
5 }
6 #fondomenuullia{
8 width:120px;
9 height:30px;
10 marginleft:1px;
11 float:left;
12 textalign:center;
13 lineheight:30px;
14 fontsize:13px;
15 color:white;
16 textdecoration:none;
17 display:block;
18 }
19 #fondomenuullia:hover{
21 color:black;
22 }
Tambinmodificamosalgunasdelaspropiedadesdeltexto,ubicndoloenelcentrodelbotnmediantetext
alignylineheight,conloquedeterminamosquelalneadetextotendrunaalturaigualqueladelatotalidad
delacapa.Ahorarestanloselementosdetextoyhacerquelosbotonessemodifiquencuandoelpunteropasapor
encimadeellos,paradarleunaspectomsagradable.
Losltimosdetallesparacrearelmenuhorizontal
Eltextodelosbotones,porserlinks,tienenuncolorazul,estnsubrayadosyubicadosenlapartesuperiordel
botn.Paradarlelavistafinalalosbotones,deberemosmodificarlaspropiedadesdeltextoenlazadoubicado
dentrodeestosbotones.
EnlosltimosdosprrafosdelcdigoCSS,lehemosdadoelcolorblancoaltextoenlazadoyotrofondoalbotn
cuandoelpunteropasaporencimadel.Estoltimorequiereunaexplicacin.Enprimerlugar,agregandola
propiedaddisplay:block,hemosconseguidoquesealandoencualquierpartedelbotn,elpunterocambiey
podamoshacercliccomosiestuviramoshacindolosobreeltexto.
Luego,almodificarelvalordelapropiedadbackground,conseguimosquealpasarelpunteroporcualquierparte
delosbotones,estoscambienlaimagendefondo,producindoseelcambiodecolor.
CdigoscompletosdelmenuhorizontalconCSS
HTML
1 <?xmlversion="1.0"encoding="iso88591"?> ?
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="es">
5 <head>
6 <title>Pginadeejemplo</title>
7 <metahttpequiv="ContentType"content="text/html;charset=iso88591"/>
8 <metahttpequiv="ContentStyleType"content="text/css"/>
9 <metahttpequiv="Language"content="Espaol"/>
10 <linkrel="stylesheet"type="text/css"href="archivos/estilo.css"/>
11 </head>
12 <body>
13 <divid="contenedor">
16 </div>
17 <divid="menu">
19 <ul>
20 <li><ahref="#">Itemuno</a></li>
21 <li><ahref="#">Itemdos</a></li>
22 <li><ahref="#">Itemtres</a></li>
23 <li><ahref="#">Itemcuatro</a></li>
24 </ul>
25 </div>
26 </div>
27 </div>
28 </body>
29 </html>
CdigodelarchivoCSS
1 body{ ?
2 margin:0;
3 padding:0;
4 font:normal13pxarial,helvetica,sansserif;
5 background:url(../imagenes/fondo.jpg)repeatx;
6 }
7 #contenedor{
8 margin:0auto;
9 width:900px;
10 }
11 #cabecera{
12 height:120px;
13 background:url(../imagenes/fondo1.jpg);
14 }
15 #cabecerah1{
16 margin:0;
17 padding:25px;
18 font:bold50pxarial,helvetica,sansserif;
19 color:white;
20 }
21 #menu{
23 height:30px;
24 }
25 #fondomenu{
27 width:485px;
28 height:30px;
29 }
30 #fondomenuul{
31 liststyle:none;
32 margin:0;
33 padding:0;
34 }
35 #fondomenuullia{
35 #fondomenuullia{
37 width:120px;
38 height:30px;
39 marginleft:1px;
40 float:left;
41 textalign:center;
42 lineheight:30px;
43 fontsize:13px;
44 color:white;
45 textdecoration:none;
46 display:block;
47 }
48 #fondomenuullia:hover{
50 color:black;
51 }
Seguirelmanual
Anterior:EjemplodeestructuradeunapginaHTML
Siguiente:10sencillosconsejosparamejorartusformularios
Publicadoel09/06/2010,ltimaactualizacin05/10/2013.
Seguira@lawebera
Licencia:ContenidoexclusivodeLaWebera.es.Prohibidasucopia.
Autor:AndrsFernndez
URL:LaWebera.es::DiseoWeb
AadirComentario(Subiraltexto)
11Cometarios
1.Carlos
Buenosdas,
Simepermiteshacerteunarecomendacinyyaqueestosartculoslosleemuchagenteparaaprenderahacer
bienlascosas,recomendaraqueenelejemploelmenloestructurasescomounalistaenlugardeemplear
unDIVparacadabotn.Deestemodoseaumentalacargasemnticadelmendenavegacin.
Saludos
Mircoles,9dejunio2010
2.VernicaMiln
Carlos,totalmentedeacuerdo.LeacabodehacerllegaaAndrstumensajeparaquecorrijaeltema.
Graciasporelaporte.
Saludos.
Mircoles,9dejunio2010
3.AndrsFernndez
HolaCarlos:
Enprimerlugar,quieroagradecerteelcomentario,queesabsolutamenteatinado.Yahehecholas
modificacionesquecorresponden,generandoelmenconelementosdelista.
Jueves,10dejunio2010
4.Danny
Hola,acabodevereltutorial,porquetengounproblemaenunaweb,quenopuedoresolver,soynuevoen
esto,yprobellinkdeejemplodelmenhorizontalconcss,tieneelmismodefectoqueelquetienemisitio,
lalistasecaehacialaderecha,(cuandolovesenIE7,enchrome,nienfirefox)tienenideacomosolucionar
eseproblema?
Esperopuedanayudarme,ahdejmimail,desdeyamuchasgracias,ysaludos.
Martes,15defebrero2011
5.AndrsFernndez
HolaDanny:
Enprimerlugar,convengamosenqueelcdigoescorrecto,yqueelproblemaesqueInternetExplorer7,a
pesardepresentaravancesrespectodeInternetExplorer6,annointerpretacorrectamentelasreglasCSS.
EsteproblemadeInternetExplorer7esfrecuente,ytieneunasolucinsencilla.Enprimerlugar,debescrear
unarchivoCSSespecficoparaestenavegador,alcualpuedesdenominar,porejemplo,ie7.css.Luego,enel
HTMLdebescrearelenlacequesolosealedoporlosnavegadoresdeMicrosoft,colocndolocomo
comentarioenelheadyconcondicionales,deformaquesoloelnavegadorIE7lolea.
1 <![ifIE7]><linkrel="stylesheet"href="archivos/ie7.css"type="text/css"/><
?
Enestearchivo,deberascolocarlasiguientelneadecdigo:
1 #fondomenuulli{display:inline;} ?
Deestaforma,loselementosflotantessesustituyenporelementosenlnea,peromanteniendoelrestodel
formatoqueestdadoporelarchivoCSSprincipal.
Esperoqueteseadeutilidad.Saludos
Mircoles,16defebrero2011
6.cali
Hola.Necesitohacerunmenusimilarsoloquealpasarporencimasedesplieueunafotocomofondo
peroestafotoesde80px.ycuandolaveoenelmenusolosalecortadacomoelaltodelmenuyaprob
poniendolineheitght:80pxtambienheight:80pxagregudisplay:block,inlineeinlineblocktambin
pusepositionrelativeperoansiguemostrandolaimagendefondocortada.
Esperoseentiendamipreguntaydesdeyaagradezcoporanticipadocualquierayuda.saludos,gracias
Martes,1demayo2012
7.laucaroso
meayudmuchisimomuchasgracias
Jueves,15denoviembre2012
8.LuisSerrano
Excelenteartculo,justoloquenecesitoparamiprimerproyectoweb.Apartirdeahoramehagoseguidorde
estaweb.Magnfico,felicidades!
Jueves,22deagosto2013
9.fran
ajaysiquieroquelaulseamasanchoqueelLi?tengoquemeterloenunDIVaparte??
Lunes,3defebrero2014
10.Jacko
mipreguntaescomopuedoaadirimagenesalmenu
Sbado,26dejulio2014
11.David
Comohagoparaagregarsumbens,ascomoenunSpryBarperomanteniedoeldiseo.
Mircoles,8deabril2015
(Subiraltexto)
AadirComentario
*Camposobligatorios
*Nombre
*Correoelectrnico(nosepublica)
Enviarcomentario
Megusta 2 Twittear 1
MeneameBitacoras
FacebookTwitterGooglePlusRSS
ManualesyArtculosWeb
Cdigosdeejemplo
AlgunostrucosCSSsimplesparalamaquetacindepginasweb
ComohacerunforoenWordPressconSimple:PressForum(segundaparte)
EfectocortinaconCSS3,jQueryyMooTools
SeguridadenelregistrodeusuariosyelmanejodesesionesconPHP(segundaparte)
AnimartextoconCSS3yWebKitparaChromeySafari
Elusodemensennuestrositiowebysuinfluenciaenlanavegacin
CSS:Correctousodecapasflotantes(float)conoverflow
LaespecificidadenHojasdeEstiloCSS
Sombraseneltexto:lapropiedadtextshadowdeCSS3
ManualJavaScript.Funciones
EspecificarunCSSDiferenteporPostenWordPress
ComohacerunforoenWordPressconSimple:PressForum(terceraparte)
TrabajandoconelementosenjQuery:GenerarHTML
ManualJavaScript.Ejemplosdecdigo
EjemplodeestructuradeunapginaHTML
ComoabrirunpopupdesdeunenlaceusandoJavaScript
ManualJavaScript.BucleFor
PropiedadesbsicasparaelmanejodeCSS3:Textos(parte1)
FundamentosdejQuery:JavaScriptNoObstructivoyrutinaDocumentReady
CreartabsopestaasconjQueryyCSSEstructurandoelcontenidodeunapginaweb
Acercade
Contacto
Newsletter
MapaWeb
SerRedactor
BajoWordPress
ltimasNovedades
Ecommerce:comoaumentareltrficoatravsdeGoogle+
CmohacerSEOen2015
Tooltipsparasitioswebmviles
5formasdemejorarlaexperienciadeusuariodetuaplicacinmvil
Tiposdeconfiguracindesitioswebparamviles
VernicaMilnDiseadorWebFreelance
20062016LaWebera.es
AvisoLegalPrivacidadCookies
AlojadoenCyberNETicos

Maquetación de Páginas Web - Crear Un Menu Horizontal Con CSS - Ejemplos HTML y XHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Maquetación de Páginas Web - Crear Un Menu Horizontal Con CSS - Ejemplos HTML y XHTML

Uploaded by

Copyright:

Available Formats

15/11/2016 Maquetacindepginasweb:crearunmenuhorizontalconCSS::EjemplosHTMLyXHTML

You might also like