Im trying to achieve a collapse effect on my mobile website while not on the desktop version. However, I have no idea how to do that and now I just have the collapse button on both of them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Name Company</title>
<!--<script src="jquery-3.0.0.js"></script>-->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>-->
<link rel="stylesheet" href="common.css">
<!-- Move This Section to the bottom for better loading time START-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Move This Section to the bottom for better loading time END -->
<style>
div#expand{
display:block;
}
</style>
<script>
function show()
{
if(document.getElementById('expand').style.display == 'none')
else(document.getElementById('expand').style.display=='none')
}
</script>
</head>
<body overflow:hidden>
<div id="header">
<a href="frontend.html">
<img src="logo.png" alt="logo image" style="width:50%;height:50%;">
</a>
</div>
<ul >
<div class="dropdown" >
<li><a href="#about" >About ▾</a>
<ul class="dropdown">
<li><a href="#">Staff</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#Contact">Contact</a>
<ul class="dropdown">
<li><a href="#">Employee Contacts</a></li>
<li><a href="#">Corporate Contacts</a></li>
<li><a href="#">Join Our Team</a></li>
</ul>
</li>
</div>
</ul>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="streamline.png" alt="steamline">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="synergy.png" alt="synergy">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="impact.png" alt="impact">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
</div>
<div data-role="collapsible">
<h3>What We Offer</h3>
<d>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.</d>
<d>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.</d>
<h3>Testimonials</h3>
<d>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.</d>
<d>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.</d>
</div>
<div id="collapse menu" data-collapse="what we offer">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<div id="collapse" class="container">
<h2>Collapsible Panel</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<div id="expand">
<p> just trying things out </p>
</div>
<a href="javascript:;" onclick= show()>Show/Hide Text</a>
</body>
</html>
#header{
background-color: black;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
@media screen and (max-width : 991px)
{
img {
display: block;
margin: 0 auto;
filter : invert(100%);
-webkit-filter: invert(100%);
}
}
img {
display: block;
filter : invert(100%);
-webkit-filter: invert(100%);
}
@media screen and (min-width : 992px)
{
#content
}
@media screen and (max-widt : 991px)
{
#content
{
}
}
@media screen and (min-width : 992px)
{
.collapse: disable;
ul {
list-style-type: none;
margin: 20;
padding: 0;
width: 200px;
background-color: blue;//f1f1f1;
position: absolute;
right: 0;
top: 80px;
cursor:pointer;
opacity:0.7;
}
li a{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
position: relative;
margin: 20;
opacity:0.7;
}
/* Change the link color on hover */
ul li a:hover {
background-color: #000;
color: white;
}
ul li ul.dropdown{
width: 200px;
background-color: black;//f1f1f1;
display:none;
position: relative;
right: 0;
top: 0%;
opacity: 0.7;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
opacity: 0.7;
}
ul li ul.dropdown li {
display: block;
opacity: 0.7;
}
}
@media screen and (max-widt : 991px)
{
.collapse: enable;
ul {
list-style-type: none;
margin: 20;
padding: 0;
width: 200px;
background-color: #B3000000;//f1f1f1;
position: absolute;
right: 0;
top: 80px;
cursor:pointer;
}
li a{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
position: relative;
margin: 20;
}
/* Change the link color on hover */
ul li a:hover {
background-color: #000;
color: white;
}
ul li ul.dropdown{
width: 200px;
background-color: black;//f1f1f1;
display:none;
position: relative;
right: 0;
top: 0%;
opacity: 0.7;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
opacity: 0.7;
}
ul li ul.dropdown li {
display: block;
opacity: 0.7;
}
}
Also, I'm curious why jQuery library's own collapse menu effect doesn't work on mine:
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
Aucun commentaire:
Enregistrer un commentaire