barra de navegacion con estilo tab

Para soporte y discusión en relación con las plantillas, temas y galerías de imágenes en phpBB 3.0.x.

Moderador: Personalizaciones de Estilo

Avatar de Usuario
craperos
Menos de 400 mensajes
Menos de 400 mensajes
Mensajes: 383
Registrado: Mar Ago 31, 2010 3:05 am
Ubicación: Argentina
Contactar:

barra de navegacion con estilo tab

Mensaje sin leer por craperos » Vie Jun 01, 2012 8:26 pm

Patrocinador

Hola gente de phpbbargentina les queria preguntar si me pueden ayudar con una barra nav que implemento en mi pagina pero quedo muy bien salvo que no se como puedo lograr el efecto en si de que cuando hago click en los sucesivos botones de izquierda a derecha se queden marcados.

Por ejemplo:

Tengo 3 botones, el boton 1 por defecto esta con el color fondo blanco y el texto 1, el segundo boton mientras esta puesto el boton primero, esta negro y el texto blanco. Cuando se hace click en el segundo boton lo que deberia pasar es que el boton 1 se ponga negro y el boton manenido 2 se quede blanco y asi sucesivamente.
Por eso pongo estilo onda Tab Nav. Alguna sugerencia?

Imagen
URL: http://www.laplatapolitica.com.ar
Plantilla(s) usuada(s): (Prosilver)(PBtech)
MODs instalados: (Portal board3)(Advanced BBCode Box 3.1.0-b2) (Board3 Portal 2.1.0-rc1)(Board Announcements 1.0.0)(Database Optimize & Repair Tool 1.1.0-b2 )(Google Analytics 1.0.0)(Lightbox 1.0.0-b1)(Pages 1.0.0 )(Password Strength 1.1.0-b2)(Precise Similar Topics 1.3.0-b3)(Private Messages Progress Bars 2.0.0-b1)(Recent Topics 2.0.3)(Scroll To Top 1.0.0-b1)(Sortables Captcha 2.0.0-DEV)(Tapatalk Plugin Demo 1.0.1)(Topic Preview 2.1.0-b3 )

Versión de phpBB: (3.1.2)

Avatar de Usuario
Leviatan21
Lider phpBB Argentina
Lider phpBB Argentina
Mensajes: 1993
Registrado: Mié Nov 25, 2009 4:43 pm
Ubicación: Buenos Aires, Argentina
Contactar:

Re: barra de navegacion con estilo tab

Mensaje sin leer por Leviatan21 » Vie Jun 01, 2012 8:33 pm

craperos escribió:con una barra nav que implemento en mi pagina pero quedo muy bien
Hay que ver que código agregaste, coloca la URL del MOD en cuestión :twisted:
Lea las reglas | Nosotros | Acerca de phpBB | Descargas | Soporte | Blog
Ex Miembro del Equipo QA en phpbb.com
No se brindará soporte por Mensaje Privado, por favor pregunte en un tema público, tenga en cuenta que su problema puede ser también un problema para otros ;)

Avatar de Usuario
craperos
Menos de 400 mensajes
Menos de 400 mensajes
Mensajes: 383
Registrado: Mar Ago 31, 2010 3:05 am
Ubicación: Argentina
Contactar:

Re: barra de navegacion con estilo tab

Mensaje sin leer por craperos » Vie Jun 01, 2012 9:19 pm

ESTE es mi css navbar

Código: Seleccionar todo

/* 
Generated via www.cssmenubuilder.com 

Copyright (c) 2008-2012 www.cssmenubuilder.com

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url("{T_THEME_PATH}/images/topMenuImages.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("{T_THEME_PATH}/images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("{T_THEME_PATH}/images/topMenuImages.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("{T_THEME_PATH}/images/topMenuImages.png") 0px -90px no-repeat; color:rgb(61,61,61);}
.menu li a.active span, .menu li a.active:hover span{background:url("{T_THEME_PATH}/images/topMenuImages.png") 100% -90px no-repeat;}
despues para el overal use el

Código: Seleccionar todo

<ul class="menu">
  <li><a href="http://www.craperos.com" class="active" target="_self"><span>Inicio</span></a></li>
  <li><a href="http://www.craperos.com/mainpage.php" target="_self"><span>++++</span></a></li>
  <li><a href="http://www.craperos.com/profile.php?" target="_self"><span>++++</span></a></li>
  <li><a href="http://www.craperos.com/index.php" target="_self"><span>++++</span></a></li>
  <li><a href="http://www.craperos.com/index.php" target="_self"><span>+ +++</span></a></li>
  <li><a href="http://www.craperos.com/ucp.php?i=172" target="_self"><span>Mi Cuenta</span></a></li>
</ul>
URL: http://www.laplatapolitica.com.ar
Plantilla(s) usuada(s): (Prosilver)(PBtech)
MODs instalados: (Portal board3)(Advanced BBCode Box 3.1.0-b2) (Board3 Portal 2.1.0-rc1)(Board Announcements 1.0.0)(Database Optimize & Repair Tool 1.1.0-b2 )(Google Analytics 1.0.0)(Lightbox 1.0.0-b1)(Pages 1.0.0 )(Password Strength 1.1.0-b2)(Precise Similar Topics 1.3.0-b3)(Private Messages Progress Bars 2.0.0-b1)(Recent Topics 2.0.3)(Scroll To Top 1.0.0-b1)(Sortables Captcha 2.0.0-DEV)(Tapatalk Plugin Demo 1.0.1)(Topic Preview 2.1.0-b3 )

Versión de phpBB: (3.1.2)

Avatar de Usuario
Leviatan21
Lider phpBB Argentina
Lider phpBB Argentina
Mensajes: 1993
Registrado: Mié Nov 25, 2009 4:43 pm
Ubicación: Buenos Aires, Argentina
Contactar:

Re: barra de navegacion con estilo tab

Mensaje sin leer por Leviatan21 » Vie Jun 01, 2012 10:10 pm

la aprte del
overall_header.html
tendría que ser mas o menos asi :

Código: Seleccionar todo

<ul class="menu">
  <li><a <!-- IF SCRIPT_NAME eq 'portal' -->class="active"<!-- ENDIF --> href="http://www.craperos.com" target="_self"><span>Inicio</span></a></li>
  <li><a <!-- IF SCRIPT_NAME eq 'mainpage' -->class="active"<!-- ENDIF --> href="http://www.craperos.com/mainpage.php" target="_self"><span>Social</span></a></li>
  <li><a <!-- IF SCRIPT_NAME eq 'profile' -->class="active"<!-- ENDIF --> href="http://www.craperos.com/profile.php?" target="_self"><span>Mi muro</span></a></li>
  <li><a <!-- IF SCRIPT_NAME eq 'index' -->class="active"<!-- ENDIF --> href="http://www.craperos.com/index.php" target="_self"><span>Secciones</span></a></li>
  <li><a <!-- IF SCRIPT_NAME eq 'index' -->class="active"<!-- ENDIF --> href="http://www.craperos.com/index.php" target="_self"><span>+ Tema</span></a></li>
  <li><a <!-- IF SCRIPT_NAME eq 'ucp' -->class="active"<!-- ENDIF --> href="http://www.craperos.com/ucp.php?i=172" target="_self"><span>Mi Cuenta</span></a></li>
</ul>
 
El único inconveniente que veo en tu código es que tanto Secciones como + Tema apuntan al mismo enlace, por lo que quedarán ambos activos... habría que quitar uno o cambiarle el enlace
Lea las reglas | Nosotros | Acerca de phpBB | Descargas | Soporte | Blog
Ex Miembro del Equipo QA en phpbb.com
No se brindará soporte por Mensaje Privado, por favor pregunte en un tema público, tenga en cuenta que su problema puede ser también un problema para otros ;)

Avatar de Usuario
craperos
Menos de 400 mensajes
Menos de 400 mensajes
Mensajes: 383
Registrado: Mar Ago 31, 2010 3:05 am
Ubicación: Argentina
Contactar:

Re: barra de navegacion con estilo tab

Mensaje sin leer por craperos » Sab Jun 02, 2012 1:32 am

el boton del + tema me queda siempre activo, es que lleva a una pagina perzonalizada que hice, sera que tengo mal algo del codigo

Código: Seleccionar todo

<!-- INCLUDE overall_header.html -->

    <h2>Elegi el lugar indicado para tu Post!</h2>

    <div class="panel">
       <div class="inner"><span class="corners-top"><span></span></span>

       <div class="content">
          <p>
<!-- MOD : New Topic everywhere - by leviatan21 - INICIO //-->
		<!-- IF S_DISPLAY_JUMPBOX -->
			<li class="left">
				<form method="post" id="posting" action="{ROOT_PATH}posting.php?mode=post" onsubmit="if (document.jumpbox.f.value == -1){return false;}">
					<fieldset class="jumpbox" style="margin-top: 3px; wi">
						<select name="f" id="f" onchange="if (this.options[this.selectedIndex].value != -1){ document.forms['posting'].action += '&f=' + this.options[this.selectedIndex].value; document.forms['posting'].submit() }">
						<!-- BEGIN jumpbox_forums -->
							<!-- IF jumpbox_forums.S_FORUM_COUNT == 1 --><option value="-1">-------- AGREGAR POST+ --------</option><!-- ENDIF -->
							<option value="{jumpbox_forums.FORUM_ID}"<!-- IF not jumpbox_forums.S_IS_POSTABLE --> disabled="disabled"<!-- ENDIF -->><!-- BEGIN level -->&nbsp; &nbsp;<!-- END level -->{jumpbox_forums.FORUM_NAME}</option>
						<!-- END jumpbox_forums -->
						</select>
						<input type="submit" value="{L_GO}" class="button2" />
					</fieldset>
				</form>
			</li>
      <!-- ENDIF -->
<!-- MOD : New Topic everywhere - by leviatan21 - FIN //-->

          </p>
       </div>

       <span class="corners-bottom"><span></span></span></div>
    </div>

    <!-- INCLUDE overall_footer.html -->
Encima el jumbox queda a la derecha y se ve muy chiquito pero bueno, se podra centrar y hacerle un diseño mas llamativo? jejeje
URL: http://www.laplatapolitica.com.ar
Plantilla(s) usuada(s): (Prosilver)(PBtech)
MODs instalados: (Portal board3)(Advanced BBCode Box 3.1.0-b2) (Board3 Portal 2.1.0-rc1)(Board Announcements 1.0.0)(Database Optimize & Repair Tool 1.1.0-b2 )(Google Analytics 1.0.0)(Lightbox 1.0.0-b1)(Pages 1.0.0 )(Password Strength 1.1.0-b2)(Precise Similar Topics 1.3.0-b3)(Private Messages Progress Bars 2.0.0-b1)(Recent Topics 2.0.3)(Scroll To Top 1.0.0-b1)(Sortables Captcha 2.0.0-DEV)(Tapatalk Plugin Demo 1.0.1)(Topic Preview 2.1.0-b3 )

Versión de phpBB: (3.1.2)

Avatar de Usuario
Leviatan21
Lider phpBB Argentina
Lider phpBB Argentina
Mensajes: 1993
Registrado: Mié Nov 25, 2009 4:43 pm
Ubicación: Buenos Aires, Argentina
Contactar:

Re: barra de navegacion con estilo tab

Mensaje sin leer por Leviatan21 » Sab Jun 02, 2012 1:54 am

craperos escribió:el boton del + tema me queda siempre activo, es que lleva a una pagina perzonalizada que hice, sera que tengo mal algo del codigo
Está apuntando a raíz/index.phpal igual que Secciones raíz/index.php
cambia el enlace al correcto ( el cual no lo se )

Código: Seleccionar todo

<li><a <!-- IF SCRIPT_NAME eq 'index' -->class="active"<!-- ENDIF --> href="http://www.craperos.com/index.php" target="_self"><span>+ Tema</span></a></li>
Lea las reglas | Nosotros | Acerca de phpBB | Descargas | Soporte | Blog
Ex Miembro del Equipo QA en phpbb.com
No se brindará soporte por Mensaje Privado, por favor pregunte en un tema público, tenga en cuenta que su problema puede ser también un problema para otros ;)

Avatar de Usuario
craperos
Menos de 400 mensajes
Menos de 400 mensajes
Mensajes: 383
Registrado: Mar Ago 31, 2010 3:05 am
Ubicación: Argentina
Contactar:

Re: barra de navegacion con estilo tab

Mensaje sin leer por craperos » Sab Jun 02, 2012 2:06 am

cerrar el tema, se pudo solucionar gracias a phpbbargentina! ya no se como agradecerles!
URL: http://www.laplatapolitica.com.ar
Plantilla(s) usuada(s): (Prosilver)(PBtech)
MODs instalados: (Portal board3)(Advanced BBCode Box 3.1.0-b2) (Board3 Portal 2.1.0-rc1)(Board Announcements 1.0.0)(Database Optimize & Repair Tool 1.1.0-b2 )(Google Analytics 1.0.0)(Lightbox 1.0.0-b1)(Pages 1.0.0 )(Password Strength 1.1.0-b2)(Precise Similar Topics 1.3.0-b3)(Private Messages Progress Bars 2.0.0-b1)(Recent Topics 2.0.3)(Scroll To Top 1.0.0-b1)(Sortables Captcha 2.0.0-DEV)(Tapatalk Plugin Demo 1.0.1)(Topic Preview 2.1.0-b3 )

Versión de phpBB: (3.1.2)

Cerrado