我正嘗試重新創建一個非常類似於Beyonce's Tumblr page上看到的菜單。我用什麼html/css標籤來創建該效果?我指的是點擊箭頭時滑過的菜單。如何使用HTML或CSS代碼創建滾動菜單?
-2
A
回答
1
想要讀取this article用於在CSS3/HTML中創建基本菜單,在網站中,您可以生成一個帶有HTML/CSS的菜單... BUt爲了獲得更多效果,可以使用Javascript庫[示例:JqueryUI demo effects]。 ..
1
這是一個非常基本的例子,讓你開始。
HTML
<div id="menu">
Hello world!
<div class="tab">></div>
</div>
CSS
#menu {
width: 600px;
height: 300px;
background: #000;
position: absolute;
left: -600px;
top: 50px;
color: #FFF;
}
.tab {
width: 40px;
height: 40px;
background: red;
position: absolute;
right: -40px;
top: 0;
color: #FFF:
}
JQuery的
$(document).ready(function() {
$(".tab").toggle(function() {
$('#menu').animate({ left: '0' }, 500);
}, function() {
$('#menu').animate({ left: '-600' }, 500);
});
});
1
這是一個實現。你需要插入以下不同的部分:
頭部分:
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
主體部分
<script language="JavaScript1.2">
var slidemenu_width='160px' //specify width of menu (in pixels)
var slidemenu_reveal='12px' //specify amount that menu should protrude initially
var slidemenu_top='170px' //specify vertical offset of menu on page
var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)- parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
}
var sitems=new Array()
///////////Edit below/////////////////////////////////
//siteitems[x]=["Item Text", "Optional URL associated with text"]
sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]
sitems[1]=["Link 1", "http://www.google.com/"]
sitems[2]=["Link 2", "http://www.link2.com/"]
sitems[3]=["Link 3", "http://www.link3.com/"]
sitems[4]=["Link 4", "http://www.link4.com/"]
sitems[5]=["Link 5", "http://www.link5.com/"]
sitems[6]=["Link 6", "http://www.link6.com/"]
sitems[7]=["Link 7", "http://www.link7.com/"]
//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""
/////////////////////////////////////////////////////////
if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2
rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}
function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
</script>
相關問題
- 1. 如何創建滾動的菜單? CSS
- 2. 滾動菜單(c代碼)
- 3. 使用CSS代替html地圖創建圓形菜單
- 4. 如何創建CSS滑動菜單?
- 5. 如何使用圖像和標籤(HTML和CSS)創建菜單?
- 6. 如何使用HTML,CSS和JQuery創建CNN菜單導航
- 7. 如何在html/css中創建下拉菜單登錄菜單
- 8. 如何在下拉菜單中創建子菜單(HTML/CSS)
- 9. 僅使用CSS創建可摺疊菜單或輕快菜單
- 10. 如何使用CSS創建具有垂直子菜單的水平HTML菜單?
- 11. 如何使用css/jquery/html創建滾動背景圖片
- 12. CSS滾動菜單
- 13. 如何創建一個滾動或靜態工具欄菜單
- 14. 如何創建使用jQuery的滾動菜單選擇器?
- 15. 如何使用也支持子菜單的滾動條創建彈出菜單
- 16. 如何使用semantic-ui創建子菜單可滾動下拉菜單?
- 17. 使用jfeinstein10的滑動菜單,如何創建滑動菜單
- 18. 如何僅使用javascript代碼創建菜單
- 19. 創建CSS菜單
- 20. 用css創建子菜單
- 21. 使用css創建滾動動畫
- 22. CSS彈出菜單與滾動菜單
- 23. 使用HTML/CSS浮動菜單欄?
- 24. 動態菜單使用HTML,CSS和JavaScript
- 25. 如何使用子菜單創建浮動菜單
- 26. 使用html/js/css創建Mac菜單欄應用程序?
- 27. 使用在創建CSS菜單類
- 28. 使用css創建垂直菜單
- 29. 使用CSS創建菜單按鈕
- 30. 創建使用JSON動態菜單,HTML,JS和CSS的移動平臺
有很多的方式來實現這樣的影響。如果你想模仿特定的效果,爲什麼不看源頭? – 2012-08-03 07:59:50
很難不在你身上挖掘你的努力,但我會盡力。爲了在stackoverflow上獲得幫助,你應該首先嚐試讓它發生,如果你無法完成它的工作,請回到這裏,展示你的代碼並尋求社區的幫助。 – 2012-08-03 08:01:31
我已經看過源代碼並試圖複製它,但是當我將它放入我的網站時,它並沒有保持相同的功能和事實,擺脫了背後的內容......所以我嘗試了要做到這一點,只是沒有把代碼放在裏面。我是新來的。 – atl 2012-08-03 20:10:17