菜單列表問題
[英]Menu list Issue
問題描述
我使class =“ selected”正常工作，因為該項目已突出顯示。
我的問題是，我有一個列表，其中需要首先加載“選定”菜單項，這意味着帶有class =“ selected”的菜單項僅在網站加載時顯示其內容。 每個菜單項都加載一系列圖像和視頻。 單獨單擊每個菜單僅顯示所需的圖像或視頻。 那很棒。
現在發生的是，當您第一次訪問該網站時，每個列表中的所有項目都已加載並顯示。 我必須選擇另一個菜單項，它們僅在要顯示的菜單項上單擊我的“選定”菜單項。
我將如何訪問我的網站，僅使“選定”菜單項自動加載其內容，而沒有加載所有其他菜單項的內容。
任何幫助將不勝感激。
我的測試網站在這里http://shoptest.divinedreamstore.com/klc/
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Type of Work</li>
<!--<li><a href="#filter" data-option-value="*"class="selected">All Projects</a></li>-->
<li><a href="#filter" data-option value=".video" class="selected">Video</a></li>
<li><a href="#filter" data-option-value=".commercials">Commercials</a></li>
<li><a href="#filter" data-option-value=".print">Print</a></li>
<li><a href="#filter" data-option-value=".radio">Radio</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Deland Train Depot" href="http://vimeo.com/45531383">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/delandtrain.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Sanford Fire Station" href="http://vimeo.com/50231345">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/sanfire.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Tavares Sea Planes" href="http://vimeo.com/59021648">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/seaplane.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Drive In Christian Church" href="http://vimeo.com/59022396">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/drivechurch.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 radio">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Radio Demo" href="http://vimeo.com/36597476">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/radiodemo.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 commercials">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Ultra 50" href="http://vimeo.com/66639113">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/ultra50.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 commercials">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Press Conference" href="http://vimeo.com/46935409">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/mediacom1.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 print">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="print" title="" href="_include/img/work/full/print1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/print1t.jpg" alt="">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 print">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print2.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/print2t.jpg" alt="">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 print">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print3.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/print3t.jpg" alt="">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 print">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print4.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/print4t.jpg" alt="">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 print">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print5.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/print5t.jpg" alt="">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 print">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print6.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/print6t.jpg" alt="">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
</div>
<!-- End Our Work Section -->
</div>
</div>
<!-- End Our Work Section -->
這是CSS
.type-work {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
margin-bottom: 30px;
line-height: 1em;
text-transform: uppercase;
}
.work-nav #filters {
margin: 0;
padding: 0;
list-style: none;
}
.work-nav #filters li {
margin: 0 0 30px 0;
padding: 0;
}
.work-nav #filters li a {
color: #7F8289;
font-size: 16px;
display: block;
}
.work-nav #filters li a:hover {
color: #FFFFFF;
}
.work-nav #filters li a.selected {
color: #1BA8FF;
}
#thumbs {
margin: 0;
padding: 0;
}
#thumbs li {
list-style-type: none;
}
.item-thumbs {
position: relative;
overflow: hidden;
margin-bottom: 30px;
cursor: pointer;
}
.item-thumbs a + img {
width: 99.5%;
}
.item-thumbs .hover-wrap {
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 450ms ease-out 0s;
-moz-transition: all 450ms ease-out 0s;
-o-transition: all 450ms ease-out 0s;
transition: all 450ms ease-out 0s;
-webkit-transform: rotateY(180deg) scale(0.5,0.5);
-moz-transform: rotateY(180deg) scale(0.5,0.5);
-ms-transform: rotateY(180deg) scale(0.5,0.5);
-o-transform: rotateY(180deg) scale(0.5,0.5);
transform: rotateY(180deg) scale(0.5,0.5);
}
.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(0deg) scale(1,1);
-moz-transform: rotateY(0deg) scale(1,1);
-ms-transform: rotateY(0deg) scale(1,1);
-o-transform: rotateY(0deg) scale(1,1);
transform: rotateY(0deg) scale(1,1);
}
.item-thumbs .hover-wrap .overlay-img {
position: absolute;
width: 100%;
height: 100%;
background: #1BA8FF;
opacity: 0.80;
filter: alpha(opacity=80);
}
.item-thumbs .hover-wrap .overlay-img-thumb {
position: absolute;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
color: #FFFFFF;
font-size: 32px;
line-height: 1em;
opacity: 1;
filter: alpha(opacity=100);
}
1 個解決方案
解決方案1
0 2014-02-20 22:21:34
您可以嘗試：
.type-work a:not(.selected) {
display: none;
}
但這不會阻止加載有問題的元素，只會顯示它們。
編輯：
在仔細研究了您的站點並發現您使用了同位素腳本之后，建議您改用Javascript。
嘗試將同位素filter: '.selected'添加到同位素調用中，如下所示：
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
layoutMode : 'fitRows',
filter: '.selected'
});
HTML / CSS下拉菜單問題（下拉列表顯示在同一行）
[英]HTML/CSS Dropdown menu issue (Dropdown list appearing on the same line)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.