Cómo agregar menú desplegable a un Theme

  • Autor Autor likepop
  • Fecha de inicio Fecha de inicio

likepop

Delta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos

Bueno en esta ocasión lo que quiero es poner a un theme que estoy utilizando(Metro Minimalist) este hermoso efecto o como se diga xD

La web en donde verlo es: BitCreativo - Tu Imaginación es Nuestra Realidad (@lifecastro te cito por las dudas de que quieras decirme y si le darías permiso a alguien de que si está dispuesto pueda pasármelo).

El efecto al que me refiero es al de que si se hace Click en Categorías se abre a la derecha un menú con todas las categorías.

Alguien sería tan amable de decirme que códigos son los que debo utilizar en mi web para tener algo como eso?

Gracias!
 
me apunto a la pregunta :topsy_turvy:
 
Tambien me sumo a la pregunta 🙂
 
Ví algo parecido aquí .

Lo malo es que si hay un anuncio en la barra, ese menú vertical queda encimado y es peligroso para los clics inválidos.
 
Reviviendo tema para ver si alguien sabe 😀
 
ferchuputazo dijo:
enviando mensaje para entrar en la zona negocios....
Hacer clic para expandir...

1. Fuera de tema.
Desvirtuar un tema charlando sobre algo totalmente distinto.
(10 puntos de infracción / expiración de 1 mes).

Te recomiendo que no hagas eso. Para que no te coloquen una infracción :encouragement:
 
Andres128 dijo:
Aquí tienen la respuesta amigos:

Slide and Push Menus | Codrops
HOW TO ADD PUSH TO SLIDE ATTRACTIVE CSS3 MENU FOR BLOGGER ? | BLOGGING-HEAVEN | Practical SEO Tips

Saludos :encouragement: muy bonito ese efecto 😱
Hacer clic para expandir...

 
Jajaja una forma rápida de hacer esto en blogger fue así: copiar todo esto en un widget html/javascript, no es la mejor manera de hacerlo pero funciona; lo que deben tener en cuenta es arreglar algunas etiquetas del css como la del body,html,a y otras debido a que te cambia las de tu platilla por estas, ahora no tengo tiempo o con gusto la adaptaría compañeros. Por cierto tienen que adaptar el html a como quieran que quede!

Insertar CODE, HTML o PHP: 
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
		<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
		<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
		<div class="container">
			<header class="clearfix">
				<span>Blueprint</span>
				<h1>Slide and Push Menus</h1>
				<nav>
					<a href="http://tympanus.net/Blueprints/QuotesRotator/" class="icon-arrow-left" data-info="previous Blueprint">Previous Blueprint</a>
					<a href="http://tympanus.net/codrops/?p=14725" class="icon-drop" data-info="back to the Codrops article">back to the Codrops article</a>
				</nav>
			</header>
			<div class="main">
				<section>
					<h2>Slide Menus</h2>
					<!-- Class "cbp-spmenu-open" gets applied to menu -->
					<button id="showLeft">Show/Hide Left Slide Menu</button>
					<button id="showRight">Show/Hide Right Slide Menu</button>
					<button id="showTop">Show/Hide Top Slide Menu</button>
					<button id="showBottom">Show/Hide Bottom Slide Menu</button>
				</section>
				<section class="buttonset">
					<h2>Push Menus</h2>
					<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
					<button id="showLeftPush">Show/Hide Left Push Menu</button>
					<button id="showRightPush">Show/Hide Right Push Menu</button>
				</section>
			</div>
		</div>

	<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				menuRight = document.getElementById( 'cbp-spmenu-s2' ),
				menuTop = document.getElementById( 'cbp-spmenu-s3' ),
				menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
				showLeft = document.getElementById( 'showLeft' ),
				showRight = document.getElementById( 'showRight' ),
				showTop = document.getElementById( 'showTop' ),
				showBottom = document.getElementById( 'showBottom' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				showRightPush = document.getElementById( 'showRightPush' ),
				body = document.body;

			showLeft.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeft' );
			};
			showRight.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuRight, 'cbp-spmenu-open' );
				disableOther( 'showRight' );
			};
			showTop.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuTop, 'cbp-spmenu-open' );
				disableOther( 'showTop' );
			};
			showBottom.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuBottom, 'cbp-spmenu-open' );
				disableOther( 'showBottom' );
			};
			showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};
			showRightPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toleft' );
				classie.toggle( menuRight, 'cbp-spmenu-open' );
				disableOther( 'showRightPush' );
			};

			function disableOther( button ) {
				if( button !== 'showLeft' ) {
					classie.toggle( showLeft, 'disabled' );
				}
				if( button !== 'showRight' ) {
					classie.toggle( showRight, 'disabled' );
				}
				if( button !== 'showTop' ) {
					classie.toggle( showTop, 'disabled' );
				}
				if( button !== 'showBottom' ) {
					classie.toggle( showBottom, 'disabled' );
				}
				if( button !== 'showLeftPush' ) {
					classie.toggle( showLeftPush, 'disabled' );
				}
				if( button !== 'showRightPush' ) {
					classie.toggle( showRightPush, 'disabled' );
				}
			}
		</script>

<script>
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

window.classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

})( window );
</script>
<style>
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome.eot');
	src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fontawesome.svg#fontawesome') format('svg'),
		url('../fonts/fontawesome.woff') format('woff'),
		url('../fonts/fontawesome.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;

}

a {
	color: #f0f0f0;
	text-decoration: none;
}

a:hover {
	color: #000;
}

.main,
.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0;
	float: left;
	font-weight: 400;
}

.container > header span {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header nav {
	float: right;
}

.container > header nav a {
	display: block;
	float: left;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	color: transparent;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
	text-indent: -8000px;
}

.container > header nav a:after {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

.container > header nav a:hover:after {
	opacity: 1;
}

.container > header nav a:hover {
	background: #47a3da;
}

.main > section {
	max-width: 260px;
	width: 90%;
	margin: 0 auto;
}

.main > section h2 {
	font-weight: 300;
	color: #ccc;
}

.main > section button {
	border: none;
	background: #47a3da;
	color: #fff;
	padding: 1.5em;
	display: block;
	width: 100%;
	cursor: pointer;
	margin: 10px 0;
	font-size: 0.8em;
}

.main > section button:hover {
	background: #258ecd;
}

.main > section button.active {
	background: #0d77b6;
}

.main > section button.disabled {
	background: #aaa;
	pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
	font-family: 'fontawesome';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 2;
	text-align: center;
	color: #47a3da;
	-webkit-font-smoothing: antialiased;
	text-indent: 8000px;
	padding-left: 8px;
}

.container > header nav a:hover:before {
	color: #fff;
}

.icon-drop:before {
	content: "\e000";
}

.icon-arrow-left:before {
	content: "\f060";
}

/* General styles for all menus */
.cbp-spmenu {
	background: #47a3da;
	position: fixed;
}

.cbp-spmenu h3 {
	color: #afdefa;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 300;
	background: #0d77b6;
}

.cbp-spmenu a {
	display: block;
	color: #fff;
	font-size: 1.1em;
	font-weight: 300;
}

.cbp-spmenu a:hover {
	background: #258ecd;
}

.cbp-spmenu a:active {
	background: #afdefa;
	color: #47a3da;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.cbp-spmenu-vertical a {
	border-bottom: 1px solid #258ecd;
	padding: 1em;
}

.cbp-spmenu-horizontal {
	width: 100%;
	height: 150px;
	left: 0;
	z-index: 1000;
	overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
	height: 100%;
	width: 20%;
	float: left;
}

.cbp-spmenu-horizontal a {
	float: left;
	width: 20%;
	padding: 0.8em;
	border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
	left: -240px;
}

.cbp-spmenu-right {
	right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
	left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
	right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
	top: -150px;
}

.cbp-spmenu-bottom {
	bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
	top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
	bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.cbp-spmenu-push-toright {
	left: 240px;
}

.cbp-spmenu-push-toleft {
	left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Example media queries */

    [MENTION=16931]medi[/MENTION]a screen and (max-width: 55.1875em){

	.cbp-spmenu-horizontal {
		font-size: 75%;
		height: 110px;
	}

	.cbp-spmenu-top {
		top: -110px;
	}

	.cbp-spmenu-bottom {
		bottom: -110px;
	}

}

    [MENTION=16931]medi[/MENTION]a screen and (max-height: 26.375em){

	.cbp-spmenu-vertical {
		font-size: 90%;
		width: 190px;
	}

	.cbp-spmenu-left,
	.cbp-spmenu-push-toleft {
		left: -190px;
	}

	.cbp-spmenu-right {
		right: -190px;
	}

	.cbp-spmenu-push-toright {
		left: 190px;
	}
}

</style>

DEMO: Pruebas Y Demas
 
Última edición:
[MENTION=21382]Andres128[/MENTION] Y si yo quisiese poner el botón de que aparezca de la derecha solamente y colocarlo en el menú, como lo haría? 🙂
[MENTION=44717]trabajosweb[/MENTION] Te cito porque vi que sabías de este tema. De casualidad tu sabes como poner esto http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

Para que quede como esto? http://bitcreativo.blogspot.com/ (En la parte superior CATEGORIAS)

Perdón si te molesté con la cita.
 
Última edición:

No, no tengo ningún problema Likepop. Pues te comento que hay que hacer varias modificaciones en la plantilla. Por ejemplo, para hacer aparecer el botón en el Categorías en ese Menú superior, el dueño de la página tuvo que hacer varias modificaciones a su plantilla. No es difícil, pero hay que dedicarle unos pocos minutos.

Si te interesa te lo puedo poner en alguna plantilla que me pases por MP sin compromiso para la semana del lunes en adelante. Ya que ando un poco ocupado con la redacción de mi sitio cristiano. Si no deseas esperar, por otro lado puedes solicitarlo en la sección de negocios, ya que tienes el rango mínimo para entrar a la misma. (Nota: Por si no sabes hay que pagar en dicha sección).

Disculpa que no pueda ayudarte de forma rápida en este momento. Escríbeme por mp con la plantilla para descargarla. Y como te comenté de mañana en adelante, hacerle la modificación que dices.
 

Amigo likepop no se si te sirva aquí te dejo el Link
Menú Oculto Deslizante desde Cualquiera de los Bordes de la Página - Blog Nivel
 
Muy poderoso... que bueno que encontraron la solución.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Problema con menú desplegable en navbar
Respuestas
2
Visitas
78
Doctor Li
Problema visualización menú desplegable en dispositivos móviles
Respuestas
1
Visitas
71
juliangalvarado
El menú desplegable no muestra todas las secciones en mi web móvil
Respuestas
0
Visitas
76
Nikkygeek
  • Pregunta Pregunta
Función para activar botón y menú desplegable al presionar
Respuestas
8
Visitas
785
ultracobra
Cómo crear un menú desplegable al hacer clic
Respuestas
2
Visitas
108
byzarz
Menú
Acceder
Registro