Menu list Issue
Question
I have the class="selected" working correctly in the fact that the item is highlighted.
My issue is that i have a list in which I need the "selected" menu item to be loaded first, meaning that the menu item with the class="selected" shows only its contents on the load of the website. Each menu item loads a series of images and videos. On its own clicking on each menu displays only the images or videos wanted. Thats great.
What is happening right now is all items in each list are being loaded and displayed when you first go to the website. I have to select another menu item, them click back on my "selected" menu item for only that menus items to be shown.
How would i be able to go to my website and only have the "selected" menu item load its contents automatically and not have all the other menu items contents loaded.
Any help would be greatly appreciated.
my test site is here 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 -->
And this is the 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 answers
solution1
0 2014-02-20 22:21:34
You could try:
.type-work a:not(.selected) {
display: none;
}
But this wouldn't prevent the loading of the elements in question, it just wouldn't display them.
EDIT:
After having a closer look at your site in question and I saw that you use the Isotope script, I would recommend changing your Javascript instead.
Try adding filter: '.selected' to your isotope call, like this:
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
layoutMode : 'fitRows',
filter: '.selected'
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Multiple DropDown Menu list issue
jQuery toggle list menu issue
Issue with :last-child on a list item Menu
Issue with accordion menu closing when clicking on child list items
HTML/CSS Dropdown menu issue (Dropdown list appearing on the same line)
Jquery issue — scrolling menu
Magento dropdown menu issue
Dropdown menu issue
superfish menu indent issue
Menu layout issue
Related Tags