按Menu右鍵

-1

這裏是什麼，我試圖做This is the main image然後當您單擊菜單everything moves right 按Menu右鍵

我得到了正確的按菜單上的圖片，撥動開關菜單以及主要的div想通了。我需要在div中居中點擊3行，我需要div佔據頁面的長度，並且我需要徽標坐在div的中心。

這裏是我當前的代碼

<html> 
<head> 
<style> 
body { 
    font-family: "Lato", sans-serif; 

} 

.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #212121; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

.sidenav p { 
     position: absolute; 
     bottom: 100px; 
     color: #CACFD2; 
     font-size: 12px; 
     left:10%; 
     } 

.sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
} 

.sidenav a.mail { 
     color: #CACFD2; 
     font-size: 12px; 
     left:10%; 
     padding: 0; 
    text-decoration: none; 

    } 


#logozone { 
    background-color: #212121; 
    transition: margin-left .5s; 
    float: left; 
    width: 10%; 
    height: 100%; 
    padding: 2px; 
} 

@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 2px;} 
    .sidenav a {font-size: 18px;} 
} 

</style> 
</head> 
<body> 

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <a href="#">Home</a> 
    <a href="#">Current Projects</a> 
    <p>client info</p> 

</div> 


<div id="logozone"> 
    <span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">&#9776; 
    <div><img src="logo.jpg"></div> 
    </div> 

<script> 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
    document.getElementById("logozone").style.marginLeft = "250px"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("logozone").style.marginLeft= "0"; 
} 
</script> 

</div> 

<div>This is a test</div> 

</body> 
</html>

預先感謝您......這是編碼我還沒有與前

來源

2017-06-22 CandiAnne

創建菜單欄和豎線不同，創建內容左側，如果在垂直欄中的圖標用戶點擊，然後就會出現菜單欄豎線。。 – bhv

這些可能對您有所幫助。 [鏈接1]（https://tympanus.net/Blueprints/SlidePushMenus/）[鏈接2]（https://tympanus.net/Development/MultiLevelPushMenu/index3.html） – CodeMonkey

我刪除了你的網站鏈接，因爲該網站可以改變或在五分鐘內消失，將來無法幫助任何人。提供示例圖片並將其發佈到此處，而不是第三方網站，原因相同。 – Rob

嘗試改變#Logomenu的志願服務崗位和#logo從絕對到相對工作並且不需要在sidenav類中添加z-index，讓它在同一個畫布上。

來源

2017-06-22 01:58:50

沒有做我以後的事，謝謝你的嘗試 – CandiAnne

回答

相關問題