og体育首页ONE Subscrioption
“站点导航崩溃”
March 17, 2011
折叠菜单包含垂直 navigation 条和滑出内容区. 将鼠标悬停在菜单项上时, 图像从顶部向下滑动，子菜单从底部向上滑动. 单击其中一个子菜单项将使整个菜单像卡牌一样崩溃，相应的内容区域将滑出. JavaScript 我们应该包括jQuery framework 和collapsing-site -navigation.. Js中指向SRC属性 script tag to the .js files
索引的部分-#.html 文件包含以下代码行，这些代码行用于初始化 script 具有基本价值的功能:
HTML
Our HTML 将由一个主要的容器与类和id cc_menu. 在这里，我们将放置所有垂直菜单项和主要内容div:第一项将得到a z-index 5，然后减少 z-index 对于接下来的项目. 这将使最后一项位于最低层. 我们这样做是为了创造卡组折叠的效果. 接下来是页面内容:Main page
about us
services
partners
locations
back to menu back to page Privacy policy.............. .............. .............. ...................... ..............
CSS
.cc_menu {
width:979px;
height:591px;
位置:绝对的;
隐藏溢出:
}
.cc_item{
text-align:中心;
width:195px;
height:591px;
float:left;
背景:# 171717;
位置:相对;
margin-right: 1 px;
}
span.cc_title{
color:#fff;
行高:46 px;
字体大小:30 px;
top:224px;
left:14px;
位置:绝对的;
背景:# 272727;
width:167px;
display:block;
z-index:11;
}
.cc_item div{
cursor:pointer
}
.cc_submenu{
display:block;
width:163px;
margin:0;
padding:0;
height:0px;
溢出:隐藏;
text-align:左;
位置:绝对的;
left:0px;
bottom:-32px;
背景:url (../图片/ bg_opacity.png)重复;z - index: 13;
}
.cc_submenu{
color:#fff;
字体大小:30 px;
光标:指针;
padding:16px;
行高:44 px;
大写首字母:
}
.cc_submenu跨度{
display:block;
字体大小:20 px;
color:#c5c5c5;
行高:26 px;
padding-top: 8 px;
}
.cc_item img{
位置:绝对的;
width:195px;
height:591px;
top:-591px;
left:0px;
}
.cc_content{
width:783px;
height:591px;
位置:绝对的;
left:-800px;
背景:# 171717;
溢出:隐藏;
}
.cc_content节{
width:100%;
首字母:没有;
字体大小:12 px;
行高:18 px;
display:none
}
span.cc_back, .cc_back_page{
位置:绝对的;
top:11px;
right:-140px;
光标:指针;
font:14px Arial, Helvetica, sans-serif; color:#171717;
行高:35 px;
首字母:大写;
填充:0 18 px;
背景:# feb400;
}
.privacy, .read_more{
width:887px;
位置:绝对的;
right:-980px; top:0;
背景:# 171717;
z-index:20;
填充:46 0 px;
}
.read_more{
z-index:19
}
