Modificare meniu in php
-
Salutare,
Am sa intru direct in subiect. Doresc sa modific meniul generat de codulphp
existent, plecand de la urmatoarea structurahtml
/css
/js
prezentata in codepen:Home / Portfolio / About si mergand pe Portfolio, alta pagina avand Home / Portfolio projects.
Am procedat astfel: am inregistrat in
script-calls.php
,mynewmenu.js
ce contine urmatorul cod:js
:// mynewmenu implementation jQuery(function($){ var height, index, prevIndex $('nav ul li').mouseover(function(e){ //Set the aesthetics (similar to :hover) $('nav ul li').removeClass('hovered'); $(this).addClass('hovered'); //Gets relevant data required for scrolling of menuRight height = $("#menuRight").css("height").replace('px',''); index = $(this).index(); //If the category button (from the navlist) has changed if (index != prevIndex){ $("#menuRight").stop(); $("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing options. prevIndex = index; } }); });
Am creat structura meniului despre care vorbeam mai sus (in functie de pagina avem un anumit meniu asa cum se vede aici) si am identificat secventa
php
ce genereaza meniul inheader.php
:<!-- Start Header --> ... <div class="myrow max_width "> <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder"> <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?> <?php if ($full_menu_true) { ?> <nav id="full-menu" role="navigation"> <?php if ($page_menu) { ?> <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?> <?php } else if(has_nav_menu('nav-menu')) { ?> <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?> <?php } else { ?> <ul class="full-menu"> <li><a>">Please assign a menu from Appearance -> Menus</a></li> <?php } ?> </nav> <?php } ?> <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?> <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?> <a href="#"> always<?php } ?>"> <div> <span></span><span></span><span></span> </div> </a> </div> </div> </header> <!-- End Header -->
Acestea fiind spuse, intrebarea mea este legata de cum anume as putea implementa in
header.php
, urmatoarele secvente dehtml
care genereaza rolloverurile de imagini atasate butoanelor de meniu (asa cum v-am aratat in codepenurile de mai sus) avand in vedere faptul ca discutam despre doua sectiuni <div> diferite dupa cum urmeaza. Home / Portfolio / About:<nav> <ul> ... </ul> <div id='menuRight'> <div> Home <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'> </img> </div> <div> Portfolio <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'> </img> </div> <div> About <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'> </img> </div> </div> </nav>
iar pentru meniu 2, Home / Portfolio projects:
<nav> <ul> ... </ul> <div id='menuRight'> <div> Home <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'> </img> </div> <div> Fiva <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'> </img> </div> <div> Caterham <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'> </img> </div> <div> Mobile <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'> </img> </div> </div> </nav>
Deocamdata nu discutam despre
css
.
Vreo parere? multam.
- Subiectul „Modificare meniu in php” este închis pentru răspunsuri noi.