Tutorial :Cómo añadir un Menú

Gypaete 29 Jul, 2010, 7:43 am

Bueno ,mi segundo aporte =)
1ero ,qué es un menú? esto:
[Imagen: a2f53k.jpg]

,lo que aprenderemos ahora es como poner uno como el de mi web =D
http://www.sekai-manga.es/
y si no aquí os dejo una imagen .
[Imagen: 2sayxon.jpg]

Yo me bajé ese menú de aquí ,os lo podéis bajar de aquí ,son fáciles ,y son muy bueno ,y está muy bonitos xD
http://www.psdgraphics.com/
esa es la web oficial ,te puedes bajar muchas cosas ,y de verdad ,me fue de mucha utilidad Big Grin

y por lo menos este menú está bien =D es el que tengo yo xD
Tengo el negro :

[Imagen: glossy-navigation-menu-preview.jpg]

pero el mio lo modfiqué un pocoo Tongue

Empezamos :
Nos bajamos ,este menú por ejemplo Big Grin

http://www.psdgraphics.com/templates/bla...down-menu/

Link de Descarga :
http://www.psdgraphics.com/file/black-ho...n-menu.zip

Bueno ,lo descargáis ,y lo descomprimis ,y os deben de salir una carpeta llamada "black-horizontal-dropdown-menu" y dentro de ella os debe de salir ,una carpeta llamada "Images" y dropdown-menu.css y otro menu.html ,le dáis Click ,y mirais como os queda.

Subís a vuestro FTP , la carpeta a images ,y dropdown-menu.css al index de vuestro FTP.

Ahora damos click derecho a menu.html y lo abrimos con el Wordpad ,o el Notepad++ ,bueno el editor que tengáis.

y copáis esto:

Cita:<center><link href="dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>

<br />
<br />

<ul id="navigation" class="nav-main">
<li><a href="http://www.psdgraphics.com/">Home</a></li>

<li class="list"><a href="#">Freebies</a>
<ul class="nav-sub">
<li><a href="http://www.psdgraphics.com/category/backgrounds/">Backgrounds</a></li>
<li><a href="http://www.psdgraphics.com/category/buttons/">Buttons</a></li>
<li><a href="http://www.psdgraphics.com/category/graphics/">Graphics</a></li>
<li><a href="http://www.psdgraphics.com/category/html-css/">HTML & CSS</a></li>
<li><a href="http://www.psdgraphics.com/category/icons/">Icons</a></li>
<li><a href="http://www.psdgraphics.com/category/psd/">PSD</a></li>
<li><a href="http://www.psdgraphics.com/category/templates/">Templates</a></li>
<li><a href="http://www.psdgraphics.com/category/tutorials/">Tutorials</a></li>
</ul>
</li>

<li class="list"><a href="#">About</a>
<ul class="nav-sub">
<li><a href="http://www.psdgraphics.com/about/">About PSDGraphics</a></li>
<li><a href="http://www.psdgraphics.com/commercial-use/">Commercial Use</a></li>
<li><a href="http://www.psdgraphics.com/about/terms-of-use/">Terms Of Use</a></li>
</ul>
</li>

<li><a href="http://www.psdgraphics.com/advertise/">Advertise</a></li>
<li><a href="http://www.psdgraphics.com/contact/">Contact</a></li>

</ul>

<br />
<br /></center>

Lo ROJO lo cambiáis por donde va el link por ej: "/index.php"
y lo AZUL ,lo cambiáis por el nombre por ej :"Foro".

Bueno ,ahora vais a vuestro ACP ,y luego a Plantillas y Estilos => Plantillas => TuEstilo => Cabecera-Plantillas => Header

si lo vais a poner en theme default ,lo que teneis que reemplazar es esto:

Esto es lo que os saldra:

Cita:<div id="container">
<a name="top" id="top"></a>
<div id="header">
AQUI VA EL LOGO ===>>> <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

Cita:<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbwarning}
{$unreadreports}
{$commentalert}
<navigation>
<br />

Lo que está en EN EL SEGUNDO Quote ,es lo que debeis reemplzar por :

Cita:<center><link href="dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>

<br />
<br />

<ul id="navigation" class="nav-main">
<li><a href="http://www.psdgraphics.com/">Home</a></li>

<li class="list"><a href="#">Freebies</a>
<ul class="nav-sub">
<li><a href="http://www.psdgraphics.com/category/backgrounds/">Backgrounds</a></li>
<li><a href="http://www.psdgraphics.com/category/buttons/">Buttons</a></li>
<li><a href="http://www.psdgraphics.com/category/graphics/">Graphics</a></li>
<li><a href="http://www.psdgraphics.com/category/html-css/">HTML & CSS</a></li>
<li><a href="http://www.psdgraphics.com/category/icons/">Icons</a></li>
<li><a href="http://www.psdgraphics.com/category/psd/">PSD</a></li>
<li><a href="http://www.psdgraphics.com/category/templates/">Templates</a></li>
<li><a href="http://www.psdgraphics.com/category/tutorials/">Tutorials</a></li>
</ul>
</li>

<li class="list"><a href="#">About</a>
<ul class="nav-sub">
<li><a href="http://www.psdgraphics.com/about/">About PSDGraphics</a></li>
<li><a href="http://www.psdgraphics.com/commercial-use/">Commercial Use</a></li>
<li><a href="http://www.psdgraphics.com/about/terms-of-use/">Terms Of Use</a></li>
</ul>
</li>

<li><a href="http://www.psdgraphics.com/advertise/">Advertise</a></li>
<li><a href="http://www.psdgraphics.com/contact/">Contact</a></li>

</ul>

<br />
<br /></center>

y ya os debe salir , puse <center> ,por que si no sale hacia la izquierda ,y queda feete xD.

Bueno ya está ,este es el tuto ,luego si os bajais otro menú ,y os queda mal ,decidmelo ,os lo arreglo Big Grin

mi menú , es una combinación de otro menú (de esa página) ,pero con otro CSS, bueno ,espero haberos ayudado Smile

eduas 7 Aug, 2010, 4:32 pm

Oye pero no me sale el menu en la plantilla header uso el tema afresh black y en esa plantilla sale solo esto

Cita:<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
{$welcomeblock}
</div>
<div id="content">
{$pm_notice}{$imgflotante}
{$bannedwarning}
{$bbwarning}
{$unreadreports}
<navigation>
<br />

aun asi lo pongo o esta en otra plantilla? my web es http://zona-mobil.saapy.com ya subi todo solo me falta editar la plantilla Big Grin

Gypaete 7 Aug, 2010, 4:39 pm

Es que tienes esa imagen y no me deja ver bien xDD

Cita:<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
{$welcomeblock}
INTENTA PONERLO AQUI
</div>
<div id="content">
{$pm_notice}{$imgflotante}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
<navigation>
<br />

eduas 7 Aug, 2010, 4:43 pm

ya lo puse y salio pero esta mas grande que el tema sale sin color y se quedo el otro XD no sabes si se pueda solucionar?

Gypaete 7 Aug, 2010, 4:44 pm

No haz subido las imagenes xD
URL /images/dropdown-bg.gif

eduas 7 Aug, 2010, 4:46 pm

subi la carpeta black-horizontal-dropdown-menu a images a ver si subiendola asi sirve

Gypaete 7 Aug, 2010, 4:48 pm

Nooo ,la carpeta no ,lo que está dentro de Images xDD

Ves ya te sale xD ,es que no leeis bienxDDD

Última modificación: 7 Aug, 2010, 4:50 pm por alecai.