Implementare meniu responsive

Incepand de aseara am inceput sa lucrez la noua tema wordpress responsive numita eBox.Numele mi la sugerat Andrei vecinul si prietenul meu.Aveam nevoie la tema de un meniu responsive mai bun. Site-ul de unde generez temele blank underscores  intampina mici probleme la meniul responsive. Ca sa nu mai complic situatia am zis ca imi trebuie altceva mai bun. Am tot cautat tutoriale cum se face un meniu responsive si ce am gasit nu prea ma ajutat. Asa ca a trebuit sa implementez meniul din tema Twenty Twelve. Asadar iata codurile din tema daca doriti sa stiti exact cum am procedat…

In header.php avem acest cod care sa pune in interiorul divului header :

[codesyntax lang=”php” lines=”normal” container=”div”]

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'ebox' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'ebox' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

[/codesyntax]

In functions.php avem functia care inregistreaza meniul.Orice tema il are dar in cazul de fata pun codul in cazul in care cineva vrea sa compare codurile cu ce este in tema lui.

[codesyntax lang=”php” lines=”normal” container=”div”]

register_nav_menus( array(
		'primary' => __( 'Primary Menu' ),
	) );

[/codesyntax]

Mai avem si fiserul de javascrypt numit navigation.js care se pune in tema intr-un folder numit js.

[codesyntax lang=”php” lines=”normal” container=”div”]

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav )
		return;
	button = nav.getElementsByTagName( 'h3' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button )
		return;

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
			menu.className = 'nav-menu';

		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )();

[/codesyntax]

Dupa care fisierul trebuie chemat in functions.php

[codesyntax lang=”php” lines=”normal” container=”div”]

function twentytwelve_scripts_styles() {

wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

}
add_action( 'wp_enqueue_scripts','twentytwelve_scripts_styles' );

[/codesyntax]

Codul pentrul stil in style.css :

[codesyntax lang=”php” container=”div” blockstate=”collapsed”]

/* Primary Navigation
-------------------------------------------------------------- */

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation .assistive-text:hover,
.main-navigation .assistive-text:active,
.main-navigation .assistive-text:focus {
	background: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000; /* Above WP toolbar */
}

/* Navigation Menu */

.main-navigation {

	margin-top: 15px;
        margin-bottom:15px;
	margin-top: 0.714285714rem;
	text-align: center;
        background:#e5e5e5;

}
.main-navigation li {
        text-decoration:none;
        list-style:none;
        margin-top: 10px;
        font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
        text-decoration:none;
        font-size: 13px;
        font-family: 'Ubuntu', sans-serif;

}
.main-navigation a:hover {
	color: #222;

}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
        text-decoration:none;
	display: inline-block;
        list-style:none; 
        font-size: 13px;
        font-family: 'Ubuntu', sans-serif;
	color: #222;
}

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {

                padding-left:10px;
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
                font-size: 13px;
                font-family: 'Ubuntu', sans-serif;
	        color: #222;
	}
	.main-navigation li a:hover {
		 color: #222;
                 font-size: 13px;
                 font-family: 'Ubuntu', sans-serif;
	}
	.main-navigation li {
                font-size:13px;
		margin: 0 20px 0 0;
		margin: 0 1.857142857rem 0 0;
		position: relative;

	}
	.main-navigation li ul {
                 font-size: 13px;
                 font-family: 'Ubuntu', sans-serif;
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 13px;
                font-family: 'Ubuntu', sans-serif;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover {
		background: #e3e3e3;
		color: #444;

	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #454545;
		font-weight: normal;
	}
	.menu-toggle {
		display: none;
	} 

}

[/codesyntax]

Daca vreti sa vedeti un demo introduceti acest link http://demo.bucurion.info/ aici.