是在動所有的網站內容

下拉菜單，所以基本上我想要做這樣的事情： https://jsfiddle.net/czqy1jts/是在動所有的網站內容

HTML

<div id="cont1"> 
    <div id="wrap"> 
     <div id="footer1"></div> 
     <div id="footer2">HOVER OVER ME</div> 
     <div id="footer3"> 
      <div id="viissees"></div> 
     </div> 
    </div> 
</div>

CSS

#wrap { 
    height:inherit; 
    width:100%; 
    position:relative;  
    bottom:0; 
    background-color:purple; 
} 


#footer1 { 
    height:10%; 
    background-color:yellow; 
    width:100%; 
    position:relative; 
} 

#footer2 { 
    height:20%; 
    background-color:purple; 
    width:100%; 
    text-align:center; 
} 

#footer3 { 
    height:80%; 
    background-color:red; 
    width:100%; 
    bottom:0px; 
}

wrap從容器中繼承高度，高度是使用jQuery（windo w.height） footer1是隱藏的，我在它上面使用了slideToggle。因此，當有人懸停在footer2上時，footer1顯示，footer2和footer3下拉，爲footer2騰出空間。

但我希望它從底部出現，同時使用％作爲我的div。所以我想我設置我的包裝底部：0;和我設置的高度：自動...

<div id="wrap"> 
    <div id="footer3"></div> 
    <div id="footer2">HOVER OVER</div> 
    <div id="footer1"></div> 
</div>

它的工作，但不是百分比。 https://jsfiddle.net/nfLs1xy9/ 這是使用vh單元實現的，但是我發現太遲了，對這些的支持太少了，所以我認爲我應該重新開始並嘗試用％來做到這一點。但我無法弄清楚如何。我已經嘗試了我的所有想法，並且我正在考慮我將耗盡他們。問題是我的包裝必須是自動和底部的，這樣當我滑動隱藏的元素時，它爲隱藏元素騰出空間，從而向上推動所有其他內容。但我不能將它設置爲自動，因爲然後我的div不知道要在什麼基礎上。

這甚至可能嗎？

（如果我的英語吸，那麼對不起，不是我1的語言和我的1後在堆棧溢出，所以我appologies，如果我做任何新秀的錯誤。）

來源

2015-05-17 rocketrocketrocketship

反正...我找到了解決辦法。我放棄了slidetoggle方法，並使用mouseenter和mouseleave來代替。

https://jsfiddle.net/4kso7125/

$("#footer1").hide(); 
var minuMeetod = function() { 
    $("#footer1").show(); 
    $("#wrap").animate({ 
     bottom: "+10%" 
    }, 100); 
}; 
$("#footer2").bind("mouseenter", minuMeetod); 
$("#footer1").on("mouseenter", function() { 
    $("#footer2").unbind("mouseenter"); 
}); 



$("#footer3").on("mouseenter", function() { 
    $("#footer2").bind("mouseenter", minuMeetod); 
}); 
$("#footer1").on("mouseleave", function() { 
    $("#footer1").fadeOut(); 
    $("#wrap").animate({ 
     bottom: "-0em" 
    }, 100); 
});

如果有人有興趣，有解決方案。我基本上在底部添加了菜單並隱藏了它。然後在mouseenter上，我只是讓它顯示（或淡入淡出），然後我將所有內容動畫化並解除綁定方法，所以它不會開始重複它的功能。然後在鼠標觸及主內容部分時重新綁定它。你可以檢查小提琴。如果我聽起來有點混亂，我不會感到驚訝。如果它在將來幫助某人，那麼耶。無論如何，感謝您的幫助。

來源

2015-05-17 09:53:28 rocketrocketrocketship

另一個參考，我嘗試在純HTML和CSS中繪製你想要的東西。看到這裏http://codepen.io/redy/pen/EjyNXL –

是在動所有的網站內容

回答

相關問題