Teemad

• Menüü kujundamine
• Väiksematele seadmetele kohandatud menüü täiendamine
• Sotsiaalmeedia lingid
• Sotsiaalmeedia linkide vormindamine
• Sotsiaalmeedia ikoonide kohandamine väiksemate ekraanide jaoks

Menüü kujundamine

Menüü on aktiveeritud functions.php lehel

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

Ja sealt loeme veel välja, et kasutatakse /js/navigation.js faili, menüü koondamiseks ühe nupu alla, kui tegemist on väiksema suurusega.

wp_enqueue_script( 'wp-kujundus-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

Minu poolest kõik see on kenasti paigas ja isegi alammenüüd töötavad kenasti. Meie asi on see nüüd loetavaks teha. Avame style.css faili ja menüü kujundus on punkti ‘5.2 Menus‘ all. Muudame kõigepealt menüü linkide fondi, suurtähtkirjaks ja värvi:

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    background: #33332D;
    position: relative;
}

Hekel on menüükirjed musta värvi ja külastatud linke pole üldse näha. Muudame linkide värvi, suurust, eemaldame lingi joone ja lisame polstrit juurde.

.main-navigation a {
	display: block;
	color: #fff;
    padding: 20px 10px;
    font-size: 14px;
    text-decoration: none;
}

Nüüd peaks esimese taseme lingid kenasti nähtavad olema:

Rippmenüü on ikka veel läbipaistev. Suurem osa on juba seal olemas. Lisame taustavärvi ja sätime menüüd antuke allapoole.

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 61px;
	left: -999em;
	z-index: 99999;
    background: #4d4d4d;
}

Nüüd peaks menüü olema täitsa loetav. Täiendus tuleks lisada kujundusele, mis kuvab hiirega “üle jooksmist” ja aktiivset linki. Selleks on kohad juba kenasti olemas. Meie asi on ainult õige värv valida:

.main-navigation li:hover > a {
    color: #fff;
    background: #4d4d4d;
}

.main-navigation ul ul a:hover {
    background: #313131;
}

Aktiivse lingi kuvamiseks, täiendame klassi .current_page_item. Lisasin siia ka kujunduse, mis kuvab hiire “üle jooksmist” ka aktiivsetele linkidele.

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover,
.main-navigation .current_page_ancestor > a {
    background: #fff;
    color: #313131;
}

Väiksematele seadmetele kohandatud menüü täiendamine

Oma veebilehe väiksemaks tegemisel koondatakse menüü kenasti ühe nupu alla. Sellele vajutades aga asetatakse menüüd vastavalt nende pikkusele.

Hea praktika on siinkohal kuvada iga menüü link eraldi real, et mobiili omanikel oleks lihtsam vajutada.

/* Small menu */
.menu-toggle {
	display: none;
}

@media screen and (max-width: 600px) {
    .menu-toggle,	
	.main-navigation.toggled .nav-menu {
		display: block;
	}

	.main-navigation ul {
		display: none;
        padding-left: 0;
	}
    

    .main-navigation li { 
		float: none; 
	}

	.main-navigation li a { 
		padding: 13px 20px; 
	}

	.main-navigation li li a { 
		padding-left: 40px; 
	}

	.main-navigation li li li a { 
		padding-left: 60px; 
	}

	.main-navigation li:hover > a {
		background: #313131;
	}
	
	.main-navigation ul ul,
	.main-navigation ul ul ul {
		position: relative;
		top: inherit;
		left: 0;
		display: block;
		float: none;
		background: #313131;
	}

	.main-navigation ul ul a { 
        width: 100%; 
    }
	
	.main-navigation ul a:hover,
	.main-navigation ul ul a:hover {
		background: #4d4d4d;
	}
    
	.main-navigation ul ul .current_page_parent {
		color: inherit;
		background: inherit;
	}

}

Sotsiaalmeedia lingid

Sama menüüriba paremale äärde sooviksime nüüd sokutada mõned sotsiaalmeedia ikoonid. Selleks, et me saaksime neid eraldi vormindada, peame tegema nende jaoks uue “pesa” ja lisama kõigepealt lingi. Ava functions.php fail ja leia olemasolev ‘Primary Menu’. Teeme sinna uue menüü ‘Social Menu’.

	register_nav_menus( array(
		'primary' => __( 'Primary Menu', 'wp-kujundus' ),
        'social' => __ ( 'Social Menu', 'wp-kujundus' ),
	) );

Nüüd kui liikuda adminni paneelile Välimus>Menüüd>Asukohtade haldamine, on näha nüüd kaks menüü “pesa”.

Meid huvitab meie uus ‘Social Menu’ ja kliki selle rea lõpus olevale ‘Lisa uus menüü’ lingile. See viib sind tagasi ‘Menüüde muutmine’ lingile. Siin vali vasakul servast ‘Viited‘ ja loo näiteks kolm lingi soovitud sotsiaalmeediale. Salvesta menüü.

Kui WordPressi esilehele nüüd piiluda, siis ei näe me oma loodud linke, sest me pole veel öelnud, kus me neid kuvada tahame. Järgmisena kasutame Justin Tadlock ideed ning avame inc/template-tags.php faili. Ja lisame sinna lõppu uue funktsiooni, mis ‘social’ menüü olemasolul teeb vajalikud id’d ja class’id. Salvesta.

/*
 * Social menu
 */

function wp_kujundus_social_menu(){
    if (has_nav_menu( 'social')) {
	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu-social',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
			'fallback_cb'     => '',
		)
	);
    }
}

Jäta meelde loodud funktsiooni nimi ning lisame selle nüüd header.php menüüsse. Kohe Primary Menu järgi.

  ...			
  <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  <?php wp_kujundus_social_menu(); ?>
</nav><!-- #site-navigation -->

Selle tulemusena oleks nagu meie peamenüü kolme lingi võrra pikem.

Sotsiaalmeedia linkide vormindamine

Kujunduse muutmiseks avame style.css faili. Paigutame kõigepealt uue menüü paremale.

/* Social menu */

.menu-social ul {
    float: right;
    text-align: center;
}

.menu-social ul li {
    position: relative;
    display:  inline-block;    
}

Alguses, kui lisasime dokumenti fonte, siis lisasime ka Font Awsome Icons fondi. Selle abil tahame linkide asemele tekitada ikoonid. Kõigepealt lisame vaikimisi ikooni. Kui veebilehel mõnele ikoonile klikkida, siis avatakse eelvaade ja selle all pidike info. Meid huvitab fondi unicode.

Nüüd saame selle ikooni lisada kõikidele social menüüs olevatele linkide ette ikooni.

.menu-social li a:before {
    content: '\f0e6';
    display: inline-block;
    padding: 0 5px;
    font-family: 'Fontawesome';
    vertical-align: top;
    
    -webkit-font-smoothing: antialiased;
}

Nüüd kopeerime endale read, mis tuvastavad sisu järgi millist ikooni tuleb kasutada.

.menu-social li a[href*="facebook.com"]::before { content: '\f09a'; }
.menu-social li a[href*="twitter.com"]::before { content: '\f099'; }
.menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; }
.menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.menu-social li a[href*="github.com"]::before { content: '\f09b'; }
.menu-social li a[href*="tumblr.com"]::before { content: '\f173'; }
.menu-social li a[href*="youtube.com"]::before { content: '\f167'; }
.menu-social li a[href*="flickr.com"]::before { content: '\f16e'; }
.menu-social li a[href*="vimeo.com"]::before { content: '\f194'; }
.menu-social li a[href*="instagram.com"]::before { content: '\f16d'; }
.menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; }

Tegelikult võiksime sellise triki teha, et peidame teksti ülse ära ja jäävad alles ainult ikoonid. Selleks lähme tagasi inc/template-tags.php faili ja muudame ‘Social menu’ fun funktsiooni, mis lingitud veebilehel olid juba olemas. Nimelt lisame class=”screen-reader-text”. See klass on juba vaikimisi vormindatud ning selle kasutamine peidab kenasti sotsiaalmeedia lingi teksti.

/*
 * Social menu
 */

function wp_kujundus_social_menu(){
    if (has_nav_menu( 'social')) {
	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu-social',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
            'link_before'     => '<span class="screen-reader-text">',
			'link_after'      => '</span>',
			'fallback_cb'     => '',
		)
	);
    }
}

Sotsiaalmeedia ikoonide kohandamine väiksemate ekraanide jaoks

Hetkel tabas ikoone järjekordne tagasilöök. Nimelt, kui viia ekraan kitsamaks kui 600px, siis ikoonid kaovad koos peamenüüga ära. Lisame meediapäringu, mis taastab ikoonid.

@media screen and (max-width: 600px) {
    #menu-social ul {
	position: absolute;
        top: 0;
        right: 10px;
        display: block;
        float: right;
    }
    
    #menu-social li a { 
        padding-left: 10px;
        padding-right: 10px;
    }
}

Järgmises peatükis säitme paika otsingukasti.