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.

2 comentarii la “Implementare meniu responsive

Faci un comentariu sau dai un răspuns?

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte articole din aceiasi categorie

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.

    Daca vrei Front-end in general recomand:
    https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/
    https://www.udemy.com/course/advanced-javascript-concepts/
    https://www.udemy.com/course/complete-react-developer-zero-to-mastery/
    Daca vrei doar Javascript recomand:
    https://www.udemy.com/course/the-complete-javascript-course/
    https://www.udemy.com/course/advanced-javascript-concepts/