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

Question

我正在尝试重新创建一个菜单，就像在Beyonce 的 Tumblr 页面上看到的那样。我使用什么 html/css 标签来创建这种效果？我指的是单击箭头时滑过的菜单。

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

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);
    });​
});

工作示例 ​</p>

Answer 3

您想阅读这篇文章以在 CSS3/HTML 中创建基本菜单，在网站中，您可以使用 HTML/CSS 生成菜单...但要获得更多效果，您可以使用 Javascript 库 [示例：JqueryUI 演示效果]。 ..