我正在開發一個網站,並在主頁中包括兩個菜單。主頁和兩個菜單的擴展名爲.php。我在Apache服務器上進行本地測試。PHP菜單在獨立工作,但不包括時
問題:我的一個菜單是頂部導航欄,它在我的本地服務器上正確顯示,但其菜單項/鏈接不可點擊並且不顯示翻轉效果。這是僅當我通過PHP包含的菜單加載主頁時。 當我加載菜單頁面時(仍在本地服務器上),問題不存在,我的菜單顯示並正常工作,包括鏈接。
請參閱下面的代碼:
首頁
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Home</title>
<!-- various css imports, removed for readability -->
</head>
<body id="home">
<?php include('top-bar.php'); ?>
<!-- Container div -->
<div id="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
</body>
</html>
菜單欄
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- various css imports, removed for readability -->
<title>Topbar</title>
</head>
<body id="home">
<div id="headerbar">
<!-- Centered container -->
<div id="container">
<!-- Top bar -->
<div id="header">
<div id="maintitle">
<span style="color: #499DF5">My</span><span style="color: #FFFFFF"> Name</span> </div>
<!-- Second menu bar -->
<div id="menutop">
<ul>
<li id="contactme" title="Write me an email"><a href='#'><span>Contact me</span></a></li>
<li class="last" id="vcf"><a href="#" onClick="MyWindow=window.open('contact-card-popup.html','MyWindow','width=300,height=150'); return false;" title="Download my contact card (.vcf or .csv)">Download
contact card</a></li>
<li class="last" style="float: right;" id="googleplus"><a target="_blank" title="Follow me on Google+" href="https://plus.google.com/u/0/114402922247766544960/posts">
<i class="fa fa-google-plus fa-fw"></i></a></li>
<li style="float: right;" id="linkedin"><a target="_blank" title="View my LinkedIn profile" href="http://www.linkedin.com/in/myprofile">
<i class="fa fa-linkedin fa-fw"></i></a></li>
<li style="float: right;" id="visualize.me"> <a target="_blank" href='http://vizualize.me/myprofile?r=myprofile' title='View my infographic resume on Vizualize.me'><span style="font-weight:bold">Visualize.me</span></a></li>
</ul>
</div> <!-- End Second menu bar -->
<div id="jobtitle">Jobtitle</div>
<!-- End header div -->
</div>
<!-- End Centered container -->
</div>
<!-- End headerbar div -->
</div>
</body>
</html>
和CSS:
/* Layout
-----------------------------------------------------------------------------*/
body {
}
#container {
width:1020px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#headerbar{
width:100%;
min-width:500px;
height:130px;
position:absolute;
background: #414141;
}
#menutop {
min-width:500px;
width:1020px;
position:absolute;
margin-top:20px;
}
#wrapper {
clear:both;
height:900px;
width:1020px;
position:relative;
margin: 0 0 0 -25px;
}
/* Top menu: header
-----------------------------------------------------------------------------*/
#header {
font-family:'Open Sans', sans serif;
}
#maintitle {
font-weight:bold;
font-size:34px;
width:250px;
height:40px;
min-height:60px;
position:relative;
margin-left:40px;
margin-top:25px;
}
#jobtitle {
color: #FFFFFF;
font-size: 14px;
width: 230px;
height: 25px;
position: absolute;
margin-left: 270px;
margin-top: 9px;
left: 16px;
top: 36px;
}
我試圖取代我的PHP包括
<?php include('top-bar.php'); ?>
相對於根的鏈接:
<?php include($_SERVER['DOCUMENT_ROOT']."/my-website/top-bar.php"); ?>
這並沒有改變任何東西。
我也對W3C進行了驗證,以防萬一它會拋出任何明顯的錯誤,但事實並非如此。
關於爲什麼PHP菜單在獨立模式下工作但不包括在何時的任何想法?謝謝。
編輯:
在我更新了他所創造的的jsfiddle摩西的一個很好的建議。由於看起來我不能在其中使用多個文件,因此我將頂層菜單的代碼放在執行php導入的主頁中。這樣做顯然會使菜單中的鏈接不工作,所以聽起來像是一個CSS問題。然而,我不知道問題出在哪裏。
http://jsfiddle.net/0ows5vym/4/
而這只是菜單,在獨立工作的罰款:http://jsfiddle.net/fdbvwL3t/
注:請diregard最右側的菜單中沒有顯示的圖標,它們是基於其他進口我不能很容易在這裏重現。這部分工作在當地很好。
它可能只是一個路徑問題。你嘗試過相對路徑嗎? 'include'../ aFolder/AnotherFolder/top-bar.php';' – Jay 2014-08-27 17:38:20
您包含的CSS似乎並不完整 - 請參閱http://jsfiddle.net/0ows5vym/。請在jsFiddle上發佈完整的工作示例。還將該非工作示例的「查看源」作爲單獨的jsFiddle發佈。 – 2014-08-27 17:43:14
傑伊,我試過絕對路徑和相對路徑,都不行。我的路徑是正確的,因爲首先加載並顯示菜單,所有php文件都在同一個文件夾中,這使得它非常簡單。還嘗試了下面的dirname(FILE)消化,它會像($ _SERVER ['DOCUMENT_ROOT'] ...)一樣加載並顯示菜單,但在任何情況下鏈接都不起作用。 – Darkane 2014-08-27 20:13:47