如何使用HTML或CSS代码创建滚动菜单？

Question

我正尝试重新创建一个非常类似于Beyonce's Tumblr page上看到的菜单。我用什么html/css标签来创建该效果？我指的是点击箭头时滑过的菜单。

Answer 1

想要读取this article用于在CSS3/HTML中创建基本菜单，在网站中，您可以生成一个带有HTML/CSS的菜单... BUt为了获得更多效果，可以使用Javascript库[示例：JqueryUI demo effects]。 ..

Answer 2

这是一个非常基本的例子，让你开始。

HTML

​<div id="menu"> 
    Hello world! 
    <div class="tab">&gt;</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); 
    });​ 
}); 

WORKING EXAMPLE

Answer 3

这是一个实现。你需要插入以下不同的部分：

头部分：

<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>