반응형
php에서 구조화된 메뉴를 올바르게 구현하는 방법
내 목표는 기존 워드프레스를 수정/교체하는 것이다.php메뉴 코드, 시작점으로 사용, 이html/css/js코드펜의 메뉴 구조:
홈페이지/포트폴리오/포트폴리오 구조에 대하여 및 아래쪽에 홈페이지/포트폴리오 프로젝트가 있는 다른 페이지.
몇 마디로 등록했습니다.script-calls.php그mynewmenu.js다음 순서로 파일을 작성하다
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;
}
});
});
원하는 메뉴 구조(여기서 볼 수 있듯이 다른 페이지에 다른 메뉴를 할당)를 만들고,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 href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
</ul>
<?php } ?>
/* I think that <div id='menuRight'> html sequences *translated*
in *php* should begin here in a conditional manner: *if* we find ourself on the
Home page, should be activated Home / Portfolio / About sequence and also if we
are on the Portfolio page, we should receive the menu 2, generated by Home / Portfolio
projects sequence. More details below. */
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</div>
</header>
<!-- End Header -->
현시점에서는, 어떻게 하면, E-메일·패키지·패키지·패키지·패키지·패키지·패키지를header.php다음과 같은 것html메뉴 버튼에 링크된 롤오버 이미지를 생성하는 시퀀스입니다.각 메뉴에는 다음과 같은 섹션이 있습니다.홈 / 포트폴리오 / 개요:
<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>
및 메뉴 2, 홈 / 포트폴리오 프로젝트:
<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>
나는 일부러 그 자리를 떠났다.css이 코드 수정의 또 다른 장이기 때문에 논의의 여지가 없습니다.
LE: 메뉴 버튼에 의해 활성화되는 롤오버 이미지 효과는 사이트의 홈페이지와 포트폴리오 페이지에서만 사용할 수 있는 것으로 충분합니다.예를 들어 프로젝트 페이지(FIVA)를 열고 마우스를 다른 프로젝트 버튼 위에 올려놓았을 때 같은 효과를 얻기란 매우 어려울 수 있다고 생각합니다.
LE2: 롤오버 이미지에 대해서는, 저는 팬시를 찾고 있지 않습니다.php마지막 프로젝트의 미리 보기 또는 다른 것을 캡처해야 하는 코드;php위의 이미지 소스 링크를 미리 정의할 수 있는 코드입니다.html이러한 이미지는 자주 교체되지 않으므로 메뉴 섹션은 문제 없습니다.
LE3: 순수 실험적인 것으로, 정정해 주세요.저는 그냥 생각했을 뿐입니다.인크루드 PHP 함수를 사용하여 두 개의 다른 함수를 호출합니다.html파일header.php(위의 메뉴1 및 2 섹션 포함)이 회피책의 시작이 될 수 있습니까?
<!-- Start Header -->
...
<div class="myrow max_width ">
...
<ul class="full-menu">
<li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
</ul>
<?php } ?>
<?php
/* But there still should be a php code, that call the
html sections *if* we are on Homepage or Portfolio page.
Something like:
Php instructions, if Home page */
include('menu1section.html');
// and also php instructions, if Portfolio page
include('menu2section.html');
?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
...
</div>
</header>
<!-- End Header -->
무슨 생각 있어?감사해요.
Wordpress dev는 아니지만 활성 카테고리/게시/페이지를 탐지하는 방법이 필요한 것 같습니다.당신은...웹 사이트를 보고 데이터 구조를 이해하는 것은 어렵습니다.
<!-- Start Header -->
...
<div class="myrow max_width ">
...
<ul class="full-menu">
<li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">
Please assign a menu from Appearance -> Menus
</a></li>
</ul>
<?php } ?>
<?php
$thisCat = get_category(get_query_var('cat'));
switch ($thisCat->name) {
case 'Home':
echo "Home test";
break;
case 'Portfolio':
echo "portfolio test";
break;
case 'About Us':
echo "About Us test";
break;
}
?>
....
<!-- End Header -->
내가 말하는 테스트에 대해서도 더 잘 알 수 있도록 내 답변을 수정했다.
언급URL : https://stackoverflow.com/questions/31861567/how-to-properly-implement-a-structured-menu-in-php
반응형
'programing' 카테고리의 다른 글
| 요청 매개 변수 '_csrf' 또는 헤더 'X-CSRF-TOKEN'에 잘못된 CSRF 토큰 'null'이 있습니다. (0) | 2023.03.27 |
|---|---|
| Wordpress 블로그에 Install 페이지가 표시되었습니다.DB는 아직 존재하며 wp-config에는 올바른 상세 정보가 있습니다. (0) | 2023.03.27 |
| AngularJS, 변수 = something인 경우 ng-class를 사용하여 클래스를 할당합니다. (0) | 2023.03.27 |
| 각도 지시어 이름: 소문자만 허용됩니까? (0) | 2023.03.27 |
| 스타일 컴포넌트와 리액트 부트스트랩? (0) | 2023.03.27 |