Cómo agregar menú desplegable a un Theme

likepop · 2013-08-09T19:22:37-0500

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!

warkings · 2013-08-09T21:03:25-0500

me apunto a la pregunta :topsy_turvy:

KevinCastro · 2013-08-09T21:56:38-0500

Tambien me sumo a la pregunta 🙂

Hasmin · 2013-08-09T22:21:22-0500

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.

likepop · 2013-08-10T16:17:06-0500

Reviviendo tema para ver si alguien sabe 😀

Andres128 · 2013-08-10T16:23:19-0500

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 😱

trabajosweb · 2013-08-10T16:46:29-0500

ferchuputazo dijo:
enviando mensaje para entrar en la zona negocios....

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:

likepop · 2013-08-10T17:43:03-0500

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 😱

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

Me gustó mucho este: Slide and Push Menus | Codrops

Podrías decirme antes de que etiquetas debería de poner cada bloque de códigos. Porq no se mucho de esto y estoy muy perdido.(Principalmente el del último bloque de javascript que no se dónde colocarlo).

Gracias

Andres128 · 2013-08-10T18:55:03-0500

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

likepop · 2013-08-10T19:16:47-0500

[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.

trabajosweb · 2013-08-11T16:42:22-0500

likepop dijo:
[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 Slide and Push Menus | Codrops

Para que quede como esto? BitCreativo - Tu Imaginación es Nuestra Realidad (En la parte superior CATEGORIAS)

Perdón si te molesté con la cita.

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.

BlogNivel · 2013-08-12T09:05:47-0500

likepop dijo:
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!

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

dilegomez2 · 2013-08-12T11:33:49-0500

Muy poderoso... que bueno que encontraron la solución.

Cómo agregar menú desplegable a un Theme

likepop

warkings

KevinCastro

Hasmin

likepop

Andres128

trabajosweb

likepop

Andres128

likepop

trabajosweb

BlogNivel

dilegomez2

Temas similares