手风琴风格的导航栏
Accordion Style Navigation Bar
我想做一个手风琴风格的导航栏，就这样：
如果您单击某个项目，例如 "Categories"，则会出现手风琴。我也想实现这种导航栏，但是当我检查元素时，它主要使用 table 而不是 <ul> 我仍然不知道该怎么做加上它我认为它也是使用 jQuery 或 javascript 之类的，我也是新手。
我尝试复制 http://www.ordinarypeople.ca/ 中的菜单结构，所以这里：
<ul>
<table width="100%">
<tbody width="100%">
<tr>
<td valign="top" width="220px;"><font style="letter-spacing:3px; padding-left:50px; font-size:13px;padding-right:20px; font-weight:600; color:#000000;"><a href="http://www.ordinarypeople.ca" style="color:#fff; font-weight:600; font-size:13px;">ORDINARY PEOPLE</a></font></td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">ABOUT</label>
<article class="ac-small">
<div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;">
<center>Alyssa Lau is the 23-year-old face and voice behind the Edmonton-based style blog, Ordinary People. A creative director, public relations coordinator, content developer, photographer, and entrepreneur, Alyssa is currently involved with various fashion-related projects after deciding against a postgraduate degree in Biochemistry. Since then, Alyssa has launched a women's sustainable and fair trade fashion e-commerce store that goes by the name of <u><a href="http://www.newclassics.ca" style="letter-spacing:1px; text-transform:Capitalize;padding:0px;color:#222;font-size:12px;" target="_blank">New Classics Studios</a></u>, which is proudly based in Edmonton. <br><br><a href="http://www.ordinarypeople.ca/2014/12/personal-blah-blah-blah-g.html" target="_blank"><b>READ MORE</b></a><br><br><a href="http://www.ordinarypeople.ca/p/ask-alyssa.html"><b>ASK ME QUESTIONS</b></a></center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-2" name="accordion-2" type="checkbox">
<label for="ac-2">CONTACT</label>
<article class="ac-medium">
<div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;">
<center>
GENERAL ENQUIRIES<br>
<font style="font-size:10px;"><a href="mailto:alyssa@ordinarypeople.ca" style="letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;">ALYSSA@ORDINARYPEOPLE.CA</a></font>
<br><br>
COMMERCIAL PROJECTS<br>
<font style="font-size:10px;"><a href="mailto:eric@ordinarypeople.ca" style="letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;">ERIC@ORDINARYPEOPLE.CA</a></font>
</center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-3" name="accordion-3" type="checkbox">
<label for="ac-3">SOCIAL</label>
<article class="ac-large">
<div style="padding-left:200px;z-index:90; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;">
<center>
<div style="align:center">
<ul id="fnav">
<li><a class="ex1" href="https://twitter.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;color:#fff;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/twtr.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Twitter</a></li>
<li><a class="ex2" href="http://facebook.com/ordinarypeople" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/fb.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Facebook </a></li>
<li><a class="ex7" href="http://youtube.com/ordinarypeoplevid" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://i.imgur.com/r6gh7XZ.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-8px;" width="27px">YouTube </a></li>
<li><a class="ex4" href="http://instagram.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank">
<img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/insta.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Instagram </a>
</li>
<li><a class="ex6" href="http://pinterest.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/pntrst.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px">Pinterest </a></li>
<li><a class="ex3" href="https://www.bloglovin.com/blogs/ordinary-people-2697392" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/blog.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Bloglovin' </a></li>
</ul>
</div>
</center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="90px"><a href="http://www.newclassics.ca" style="font-weight:600; font-family: arial; letter-spacing;3px; font-size:11px; ;color:#666; align:center;" target="_blank">SHOP</a></td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-4" name="accordion-4" type="checkbox">
<label for="ac-4">CATEGORIES</label>
<article class="ac-categories">
<div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:11px;letter-spacing:1px;">
<center><a href="http://www.ordinarypeople.ca/search/label/Outfits?max-results=9">WEARING</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Travel?max-results=9">TRAVEL</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Photoshoot?max-results=9">PHOTOSHOOTS</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Tutorial?max-results=9">TUTORIALS</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Video?max-results=9">VIDEO</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Beauty?max-results=9">HAIR AND BEAUTY</a><br><br>
</center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="150px">
<form action="/search" id="searchThis" method="get" style="display: inline; "><input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="border: 1px solid #bbbbbb; background: none;" type="text" value="" vinput="">
<input id="searchButton" type="submit" value="SEARCH">
</form>
</td>
</tr>
</tbody>
</table>
<li><a href="#">_</a></li>
</ul>
正如我所说，我仍然不知道这一切背后的 jQuery/javascript。
我将其用于博客 (Blogger)，仅供参考。
希望有人能帮忙。
在最简单的形式中，您需要为 Headers 高度设置动画并在其下方附加数据。您需要更高的 css z-index 值才能使 header 显示在所有其他页面内容之上。
我创建了一个简单的 Demo 给你一个开始
演示
https://jsfiddle.net/10uavzd4/
代码
// click option, animate header to to 120 pixels height, when the animation is done (completed) append Data just below the header.
$(".about").on("click", function () {
$(".info").empty()
$("#header").animate({
height: "120px"
}, 400).promise().done(function () {
$("#header").append("<span class='info'>This is some info</span>")
})
})
$(".contact").on("click", function () {
$(".info").empty()
$("#header").animate({
height: "120px"
}, 400).promise().done(function () {
$("#header").append("<span class='info'>Contact Information</span>")
})
})
我不记得我是从哪里修改代码的，但我会附上我现在正在使用的代码:)
希望对您有所帮助！
阿丽莎 (www.ordinarypeople.ca)
.ac-container{
margin: 0px auto 0px auto;
}
.ac-container label{
font-family: arial;
padding: 0px 0px;
position: relative;
z-index: 20;
width: 90px;
letter-spacing:3px;
text-align:center;
text-transform: uppercase;
display: block;
height: 10px;
cursor: pointer;
font-weight:600;
color: #000;
text-shadow: 0px 0px 0px rgba(255,255,255,0.8);
line-height: auto;
font-size: 11px;
background: linear-gradient(top, #d4cfcf 100%,#d4cfcf 100%);
box-shadow:
0px 0px 0px 0px rgba(155,155,155,0.3),
0px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 0px 0px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #d4cfcf;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #d4cfcf;
color: #f9f9f9;
text-shadow: 0px 0px 0px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 0px rgba(155,155,155,0.3),
0px 0px 0px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background: #d4cfcf repeat;
margin-top: 10px;
overflow: hidden;
width:100%;
left:0px;
height: 0px;
position: absolute;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 0px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 165px;
}
.ac-container input:checked ~ article.ac-medium{
height: 130px;
}
.ac-container input:checked ~ article.ac-large{
height: 90px;}
.ac-container input:checked ~ article.ac-categories{
height: 200px;
}
<table width='100%'><tbody width='100%'><tr>
<td valign='top' width='220px'><font style='letter-spacing:3px; font-size:13px;padding-right:20px; font-weight:600; color:#000000'><a href='http://www.ordinarypeople.ca' style='color:#fff; font-weight:600; font-size:13px; '><div style='width:220px; overflow:hidden; padding-left:50px;margin-top:-15px;'>ORDINARY PEOPLE</div></a></font></td>
<td valign='top' width='110px'>
<section class='ac-container'>
<div>
<input id='ac-1' name='accordion-1' type='checkbox'/>
<label for='ac-1'>ABOUT</label>
<article class='ac-small'>
<div style='padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;'><center>Alyssa Lau is the 23-year-old face and voice behind the Edmonton-based style blog, Ordinary People. A creative director, public relations coordinator, content developer, photographer, and entrepreneur, Alyssa is currently involved with various fashion-related projects after deciding against a postgraduate degree in Biochemistry. Since then, Alyssa has launched a women's sustainable and fair trade fashion e-commerce store that goes by the name of <u><a href='http://www.newclassics.ca' style='letter-spacing:1px; text-transform:Capitalize;padding:0px;color:#222;font-size:12px;' target='_blank'>New Classics Studios</a></u>, which is proudly based in Edmonton. <br/><br/><a href='http://www.ordinarypeople.ca/2014/12/personal-blah-blah-blah-g.html' target='_blank'><b>READ MORE</b></a><br/><br/><a href='http://www.ordinarypeople.ca/p/ask-alyssa.html'><b>ASK ME QUESTIONS</b></a></center></div>
</article>
</div></section></td>
<td valign='top' width='110px'><section class='ac-container'><div>
<input id='ac-2' name='accordion-2' type='checkbox'/>
<label for='ac-2'>CONTACT</label>
<article class='ac-medium'>
<div style='padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;'>
<center>
GENERAL ENQUIRIES<br/>
<font style='font-size:10px;'><a href='mailto:alyssa@ordinarypeople.ca' style='letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;'>ALYSSA@ORDINARYPEOPLE.CA</a></font>
<br/><br/>
COMMERCIAL PROJECTS<br/>
<font style='font-size:10px;'><a href='mailto:eric@ordinarypeople.ca' style='letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;'>ERIC@ORDINARYPEOPLE.CA</a></font>
</center>
</div>
</article>
</div>
</section></td>
<td valign='top' width='110px'><section class='ac-container'><div>
<input id='ac-3' name='accordion-3' type='checkbox'/>
<label for='ac-3'>SOCIAL</label>
<article class='ac-large'>
<div style='padding-left:200px;z-index:90; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;'>
<center>
<div style='align:center'>
<ul id='fnav'>
<li><a class='ex1' href='https://twitter.com/imalyssalau' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;color:#fff;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/twtr.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Twitter</a></li>
<li><a class='ex2' href='http://facebook.com/ordinarypeople' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/fb.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Facebook </a></li>
<li><a class='ex7' href='http://youtube.com/ordinarypeoplevid' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://i.imgur.com/r6gh7XZ.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-8px;' width='27px'/>YouTube </a></li>
<li><a class='ex4' href='http://instagram.com/imalyssalau' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'>
<img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/insta.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Instagram </a></li>
<li><a class='ex6' href='http://pinterest.com/imalyssalau' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/pntrst.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/>Pinterest </a></li>
<li><a class='ex3' href='https://www.bloglovin.com/blogs/ordinary-people-2697392' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/blog.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Bloglovin' </a></li>
</ul></div>
</center></div>
</article>
</div>
</section></td>
<td valign='top' width='110px'><a href='http://www.newclassics.ca' style='font-weight:600; font-family: arial; letter-spacing;3px; font-size:11px; ;color:#666; align:center;' target='_blank'>SHOP</a></td>
<td valign='top' width='110px'>
<div>
<section class='ac-container'>
<input id='ac-4' name='accordion-4' type='checkbox'/>
<label for='ac-4'>CATEGORIES</label>
<article class='ac-categories'>
<div style='padding-left:200px; padding-top:30px;padding-right:200px;font-size:11px;letter-spacing:1px;'><center><a href='http://www.ordinarypeople.ca/search/label/Outfits?max-results=6'>WEARING</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Travel?max-results=6'>TRAVEL</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Photoshoot?max-results=9'>PHOTOSHOOTS</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Tutorial?max-results=6'>TUTORIALS</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Personal?max-results=6'>PERSONAL</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Beauty?max-results=6'>HAIR AND BEAUTY</a><br/><br/></center></div>
</article>
</section> </div></td>
<td valign='top' width='220px'><div class='searchbox' id='searchbox'><form action='/search' id='searchThis' method='get' style='display: inline; '><input id='searchBox' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='border: 1px solid #bbbbbb; background: none;' type='text' value='' vinput=''/> <input id='searchButton' type='submit' value='SEARCH'/></form></div></td>
</tr></tbody></table>
我想做一个手风琴风格的导航栏，就这样：
如果您单击某个项目，例如 "Categories"，则会出现手风琴。我也想实现这种导航栏，但是当我检查元素时，它主要使用 table 而不是 <ul> 我仍然不知道该怎么做加上它我认为它也是使用 jQuery 或 javascript 之类的，我也是新手。
我尝试复制 http://www.ordinarypeople.ca/ 中的菜单结构，所以这里：
<ul>
<table width="100%">
<tbody width="100%">
<tr>
<td valign="top" width="220px;"><font style="letter-spacing:3px; padding-left:50px; font-size:13px;padding-right:20px; font-weight:600; color:#000000;"><a href="http://www.ordinarypeople.ca" style="color:#fff; font-weight:600; font-size:13px;">ORDINARY PEOPLE</a></font></td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">ABOUT</label>
<article class="ac-small">
<div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;">
<center>Alyssa Lau is the 23-year-old face and voice behind the Edmonton-based style blog, Ordinary People. A creative director, public relations coordinator, content developer, photographer, and entrepreneur, Alyssa is currently involved with various fashion-related projects after deciding against a postgraduate degree in Biochemistry. Since then, Alyssa has launched a women's sustainable and fair trade fashion e-commerce store that goes by the name of <u><a href="http://www.newclassics.ca" style="letter-spacing:1px; text-transform:Capitalize;padding:0px;color:#222;font-size:12px;" target="_blank">New Classics Studios</a></u>, which is proudly based in Edmonton. <br><br><a href="http://www.ordinarypeople.ca/2014/12/personal-blah-blah-blah-g.html" target="_blank"><b>READ MORE</b></a><br><br><a href="http://www.ordinarypeople.ca/p/ask-alyssa.html"><b>ASK ME QUESTIONS</b></a></center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-2" name="accordion-2" type="checkbox">
<label for="ac-2">CONTACT</label>
<article class="ac-medium">
<div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;">
<center>
GENERAL ENQUIRIES<br>
<font style="font-size:10px;"><a href="mailto:alyssa@ordinarypeople.ca" style="letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;">ALYSSA@ORDINARYPEOPLE.CA</a></font>
<br><br>
COMMERCIAL PROJECTS<br>
<font style="font-size:10px;"><a href="mailto:eric@ordinarypeople.ca" style="letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;">ERIC@ORDINARYPEOPLE.CA</a></font>
</center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-3" name="accordion-3" type="checkbox">
<label for="ac-3">SOCIAL</label>
<article class="ac-large">
<div style="padding-left:200px;z-index:90; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;">
<center>
<div style="align:center">
<ul id="fnav">
<li><a class="ex1" href="https://twitter.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;color:#fff;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/twtr.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Twitter</a></li>
<li><a class="ex2" href="http://facebook.com/ordinarypeople" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/fb.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Facebook </a></li>
<li><a class="ex7" href="http://youtube.com/ordinarypeoplevid" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://i.imgur.com/r6gh7XZ.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-8px;" width="27px">YouTube </a></li>
<li><a class="ex4" href="http://instagram.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank">
<img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/insta.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Instagram </a>
</li>
<li><a class="ex6" href="http://pinterest.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/pntrst.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px">Pinterest </a></li>
<li><a class="ex3" href="https://www.bloglovin.com/blogs/ordinary-people-2697392" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/blog.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Bloglovin' </a></li>
</ul>
</div>
</center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="90px"><a href="http://www.newclassics.ca" style="font-weight:600; font-family: arial; letter-spacing;3px; font-size:11px; ;color:#666; align:center;" target="_blank">SHOP</a></td>
<td valign="top" width="90px">
<section class="ac-container">
<div>
<input id="ac-4" name="accordion-4" type="checkbox">
<label for="ac-4">CATEGORIES</label>
<article class="ac-categories">
<div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:11px;letter-spacing:1px;">
<center><a href="http://www.ordinarypeople.ca/search/label/Outfits?max-results=9">WEARING</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Travel?max-results=9">TRAVEL</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Photoshoot?max-results=9">PHOTOSHOOTS</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Tutorial?max-results=9">TUTORIALS</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Video?max-results=9">VIDEO</a><br><br>
<a href="http://www.ordinarypeople.ca/search/label/Beauty?max-results=9">HAIR AND BEAUTY</a><br><br>
</center>
</div>
</article>
</div>
</section>
</td>
<td valign="top" width="150px">
<form action="/search" id="searchThis" method="get" style="display: inline; "><input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="border: 1px solid #bbbbbb; background: none;" type="text" value="" vinput="">
<input id="searchButton" type="submit" value="SEARCH">
</form>
</td>
</tr>
</tbody>
</table>
<li><a href="#">_</a></li>
</ul>
正如我所说，我仍然不知道这一切背后的 jQuery/javascript。
我将其用于博客 (Blogger)，仅供参考。 希望有人能帮忙。
在最简单的形式中，您需要为 Headers 高度设置动画并在其下方附加数据。您需要更高的 css z-index 值才能使 header 显示在所有其他页面内容之上。
我创建了一个简单的 Demo 给你一个开始
演示
https://jsfiddle.net/10uavzd4/
代码
// click option, animate header to to 120 pixels height, when the animation is done (completed) append Data just below the header.
$(".about").on("click", function () {
$(".info").empty()
$("#header").animate({
height: "120px"
}, 400).promise().done(function () {
$("#header").append("<span class='info'>This is some info</span>")
})
})
$(".contact").on("click", function () {
$(".info").empty()
$("#header").animate({
height: "120px"
}, 400).promise().done(function () {
$("#header").append("<span class='info'>Contact Information</span>")
})
})
我不记得我是从哪里修改代码的，但我会附上我现在正在使用的代码:)
希望对您有所帮助！
阿丽莎 (www.ordinarypeople.ca)
.ac-container{
margin: 0px auto 0px auto;
}
.ac-container label{
font-family: arial;
padding: 0px 0px;
position: relative;
z-index: 20;
width: 90px;
letter-spacing:3px;
text-align:center;
text-transform: uppercase;
display: block;
height: 10px;
cursor: pointer;
font-weight:600;
color: #000;
text-shadow: 0px 0px 0px rgba(255,255,255,0.8);
line-height: auto;
font-size: 11px;
background: linear-gradient(top, #d4cfcf 100%,#d4cfcf 100%);
box-shadow:
0px 0px 0px 0px rgba(155,155,155,0.3),
0px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 0px 0px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #d4cfcf;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #d4cfcf;
color: #f9f9f9;
text-shadow: 0px 0px 0px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 0px rgba(155,155,155,0.3),
0px 0px 0px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background: #d4cfcf repeat;
margin-top: 10px;
overflow: hidden;
width:100%;
left:0px;
height: 0px;
position: absolute;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 0px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 165px;
}
.ac-container input:checked ~ article.ac-medium{
height: 130px;
}
.ac-container input:checked ~ article.ac-large{
height: 90px;}
.ac-container input:checked ~ article.ac-categories{
height: 200px;
}
<table width='100%'><tbody width='100%'><tr>
<td valign='top' width='220px'><font style='letter-spacing:3px; font-size:13px;padding-right:20px; font-weight:600; color:#000000'><a href='http://www.ordinarypeople.ca' style='color:#fff; font-weight:600; font-size:13px; '><div style='width:220px; overflow:hidden; padding-left:50px;margin-top:-15px;'>ORDINARY PEOPLE</div></a></font></td>
<td valign='top' width='110px'>
<section class='ac-container'>
<div>
<input id='ac-1' name='accordion-1' type='checkbox'/>
<label for='ac-1'>ABOUT</label>
<article class='ac-small'>
<div style='padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;'><center>Alyssa Lau is the 23-year-old face and voice behind the Edmonton-based style blog, Ordinary People. A creative director, public relations coordinator, content developer, photographer, and entrepreneur, Alyssa is currently involved with various fashion-related projects after deciding against a postgraduate degree in Biochemistry. Since then, Alyssa has launched a women's sustainable and fair trade fashion e-commerce store that goes by the name of <u><a href='http://www.newclassics.ca' style='letter-spacing:1px; text-transform:Capitalize;padding:0px;color:#222;font-size:12px;' target='_blank'>New Classics Studios</a></u>, which is proudly based in Edmonton. <br/><br/><a href='http://www.ordinarypeople.ca/2014/12/personal-blah-blah-blah-g.html' target='_blank'><b>READ MORE</b></a><br/><br/><a href='http://www.ordinarypeople.ca/p/ask-alyssa.html'><b>ASK ME QUESTIONS</b></a></center></div>
</article>
</div></section></td>
<td valign='top' width='110px'><section class='ac-container'><div>
<input id='ac-2' name='accordion-2' type='checkbox'/>
<label for='ac-2'>CONTACT</label>
<article class='ac-medium'>
<div style='padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;'>
<center>
GENERAL ENQUIRIES<br/>
<font style='font-size:10px;'><a href='mailto:alyssa@ordinarypeople.ca' style='letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;'>ALYSSA@ORDINARYPEOPLE.CA</a></font>
<br/><br/>
COMMERCIAL PROJECTS<br/>
<font style='font-size:10px;'><a href='mailto:eric@ordinarypeople.ca' style='letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;'>ERIC@ORDINARYPEOPLE.CA</a></font>
</center>
</div>
</article>
</div>
</section></td>
<td valign='top' width='110px'><section class='ac-container'><div>
<input id='ac-3' name='accordion-3' type='checkbox'/>
<label for='ac-3'>SOCIAL</label>
<article class='ac-large'>
<div style='padding-left:200px;z-index:90; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;'>
<center>
<div style='align:center'>
<ul id='fnav'>
<li><a class='ex1' href='https://twitter.com/imalyssalau' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;color:#fff;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/twtr.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Twitter</a></li>
<li><a class='ex2' href='http://facebook.com/ordinarypeople' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/fb.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Facebook </a></li>
<li><a class='ex7' href='http://youtube.com/ordinarypeoplevid' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://i.imgur.com/r6gh7XZ.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-8px;' width='27px'/>YouTube </a></li>
<li><a class='ex4' href='http://instagram.com/imalyssalau' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'>
<img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/insta.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Instagram </a></li>
<li><a class='ex6' href='http://pinterest.com/imalyssalau' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/pntrst.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/>Pinterest </a></li>
<li><a class='ex3' href='https://www.bloglovin.com/blogs/ordinary-people-2697392' style='letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;' target='_blank'><img src='http://www.songofstyle.com/wp-content/themes/ponsonby/image/blog.png' style='-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;' width='15px'/> Bloglovin' </a></li>
</ul></div>
</center></div>
</article>
</div>
</section></td>
<td valign='top' width='110px'><a href='http://www.newclassics.ca' style='font-weight:600; font-family: arial; letter-spacing;3px; font-size:11px; ;color:#666; align:center;' target='_blank'>SHOP</a></td>
<td valign='top' width='110px'>
<div>
<section class='ac-container'>
<input id='ac-4' name='accordion-4' type='checkbox'/>
<label for='ac-4'>CATEGORIES</label>
<article class='ac-categories'>
<div style='padding-left:200px; padding-top:30px;padding-right:200px;font-size:11px;letter-spacing:1px;'><center><a href='http://www.ordinarypeople.ca/search/label/Outfits?max-results=6'>WEARING</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Travel?max-results=6'>TRAVEL</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Photoshoot?max-results=9'>PHOTOSHOOTS</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Tutorial?max-results=6'>TUTORIALS</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Personal?max-results=6'>PERSONAL</a><BR/>
<a href='http://www.ordinarypeople.ca/search/label/Beauty?max-results=6'>HAIR AND BEAUTY</a><br/><br/></center></div>
</article>
</section> </div></td>
<td valign='top' width='220px'><div class='searchbox' id='searchbox'><form action='/search' id='searchThis' method='get' style='display: inline; '><input id='searchBox' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='border: 1px solid #bbbbbb; background: none;' type='text' value='' vinput=''/> <input id='searchButton' type='submit' value='SEARCH'/></form></div></td>
</tr></tbody></table>