the dropdowns
with a 3d-effect box-shadow
basic usage
<!-- simple dropdown with button -->
<span class="dropdown">
<button class="btn-primary" data-expanded="false">beautiful <i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu">
<li><a href="">Jessica Alba</a></li>
<li><a href="">Lili simmons</a></li>
<li><a href="">Miley Cirus</a></li>
<li><a href="">more <i class="fa fa-plus-circle"></i></a></li>
</ul>
</span>
<!-- simple dropdown with <a> -->
<span class="dropdown">
<a href="#!" class="btn-warning" data-expanded="false">beautiful <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="">Jessica Alba</a></li>
<li><a href="">Lili simmons</a></li>
<li><a href="">Miley Cirus</a></li>
<li class="separator"></li>
<li><a href="">more <i class="fa fa-plus-circle"></i></a></li>
</ul>
</span>
<!-- simple dropdown with an addon dropdown -->
<div class="btn-group">
<a href="#!" class="btn-success">beautiful</a>
<span class="dropdown addon-right">
<button class="btn-success" data-expanded="false"><i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu">
<li><a href="">Jessica Alba</a></li>
<li><a href="">Lili simmons</a></li>
<li><a href="">Miley Cirus</a></li>
<li class="separator"></li>
<li><a href="">more <i class="fa fa-plus-circle"></i></a></li>
</ul>
</span>
</div>
<!-- simple dropdown with two addon dropdowns -->
<div class="btn-group">
<span class="dropdown addon-left">
<button class="btn-default" data-expanded="false"><i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu">
<li><a href="">Jessica Alba</a></li>
<li><a href="">Lili simmons</a></li>
<li><a href="">Miley Cirus</a></li>
<li class="separator"></li>
<li><a href="">more <i class="fa fa-plus-circle"></i></a></li>
</ul>
</span>
<a href="#!" class="btn-default">beautiful</a>
<span class="dropdown addon-right">
<button class="btn-default" data-expanded="false"><i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu">
<li><a href="">Jessica Alba</a></li>
<li><a href="">Lili simmons</a></li>
<li><a href="">Miley Cirus</a></li>
<li class="separator"></li>
<li><a href="">more <i class="fa fa-plus-circle"></i></a></li>
</ul>
</span>
</div>
The loader
I'm sure that you have seen it
basic usage
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body class="animated">
<section id="page">
<!-- PUT YOUR CONTENT HERE -->
</section>
<!-- page loader -->
<div class="row full-page items-center justify-center loader-container"><div id="loader"></div></div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Loader();
</script>
</body>
</html>
the duration option
the 1st way : javascript option
<script type="text/javascript">
new Iroom.Loader({duration: 5000});
</script>
the 2nd way : data-duration attribute (that overrides the first)
<!-- page loader -->
<div class="row full-page items-center justify-center loader-container">
<div id="loader" data-duration="9000"></div>
</div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Loader();
</script>
custom style
<!-- page loader -->
<div class="row full-page items-center justify-center loader-container">
<div id="loader" style="border-color: green; border-top-color: lime; border-width: 3px; width: 55px; height: 55px;"></div>
</div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Loader();
</script>
The lightbox
without plugin
basic usage
<figure class="lightbox">
<img src="demo/assets/images/img1.jpg" alt=""/>
<figcaption> ... some hidden text ... </figcaption>
</figure>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Lightbox();
</script>
gallery : with data-gallery attribute
<figure class="lightbox" data-gallery="my-gallery">
<img src="demo/assets/images/img1.jpg" alt=""/>
<figcaption> ... some hidden text ... </figcaption>
</figure>
<figure class="lightbox" data-gallery="my-gallery">
<img src="demo/assets/images/img2.jpg" alt=""/>
<figcaption> ... some hidden text ... </figcaption>
</figure>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Lightbox();
</script>
you can navigate in the lightbox with keyboard arows and exit with "esc" key
the filters
a core component
you just need 3 classes and data-filter attributes
<div class="filters">
<ul>
<li><a href="#!" class="filter-button" data-filter="all">all</a></li>
<li><a href="#!" class="filter-button" data-filter="web">web</a></li>
<li><a href="#!" class="filter-button" data-filter="print">print</a></li>
<li><a href="#!" class="filter-button" data-filter="pub">pub</a></li>
</ul>
<div>
<div class="filter-display" data-filter="web"> <p>web</p></div>
<div class="filter-display" data-filter="print"> <p>print</p></div>
<div class="filter-display" data-filter="print"> <p>print</p></div>
<div class="filter-display" data-filter="pub"> <p>pub</p></div>
<div class="filter-display" data-filter="pub"> <p>pub</p></div>
<div class="filter-display" data-filter="pub"> <p>pub</p></div>
<div class="filter-display" data-filter="web"> <p>web</p></div>
<div class="filter-display" data-filter="web"> <p>web</p></div>
<div class="filter-display" data-filter="print"> <p>print</p></div>
<div class="filter-display" data-filter="web"> <p>web</p></div>
<div class="filter-display" data-filter="print"> <p>print</p></div>
</div>
</div>
the smooth scroll
to navigate smooth to page anchors
basic usage
you need a demo ?
click here to go to the menu
<div>
<p>you need a demo ?</p>
<p>click <a href="#menu" class="btn-default"><i class="fa fa-arrow-up"></i> here</a> to go to the menu</p>
</div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Smooth();
</script>
the duration option
the 1st way : javascript option
<script type="text/javascript">
new Iroom.Smooth({duration: 5000});
</script>
the 2nd way : data-duration attribute (that overrides the first)
<div>
<p>you need a demo ?</p>
<p>click <a href="#menu" data-duration="9000" class="btn-default"><i class="fa fa-arrow-up"></i> here</a> to go to the menu</p>
</div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.min.js"></script>
<script type="text/javascript">
new Iroom.Smooth();
</script>
the scroll to top
users like to go back to the top
basic usage
you need a demo ?
click here to scroll to top
<!-- scroll-to-top -->
<div id="scrollToTop" class="hidden"><i class="fa fa-chevron-up"></i></div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.js"></script>
<script type="text/javascript">
new Iroom.ScrollToTop();
</script>
the duration option
the 1st way : javascript option
<script type="text/javascript">
new Iroom.ScrollToTop({duration: 5000});
</script>
the 2nd way : data-duration attribute (that overrides the first)
<!-- scroll-to-top -->
<div id="scrollToTop" data-duration="9000" class="hidden"><i class="fa fa-chevron-up"></i></div>
<!-- scripts -->
<script type="text/javascript" src="js/iroom.js"></script>
<script type="text/javascript">
new Iroom.ScrollToTop();
</script>
