Does anyone know how to apply a css3 transition dropdown effect to the navigation-dropdown, since there is no :onclick in css?*
* while keeping navigation-dropdown on an auto height (I don't want a fixed height for the dropdown menu).
Code: (See example for the entire code)
CSS:
<style>
html {
margin:0;
padding:0;
}
body {
font-size:100%;
font-family:Arial, sans-serif;
background-color:#ffffff;
margin:0;
padding:0;
}
#wrapper {
float:left;
position:relative;
width:640px;
margin:0;
padding:20px 50px 20px 50px;
}
#navigation {
float:left;
width:100%;
margin:0;
padding:0;
}
#navigation-sub {
float:left;
cursor:pointer;
color:#ffffff;
font-size:16px;
background-color:#69C;
margin:0;
padding:6px 15px 7px 15px;
}
#navigation-sub:hover {
background-color:#C66;
}
#navigation-sub:active {
background-color:#eeeeee;
}
#navigation-dropdown {
position: absolute;
top: 50px;
background-color:#eeeeee;
border:#69C 4px solid;
margin:0;
padding:15px 15px 15px 30px;
/*This here*/
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}
.hide {
opacity: 0;
height: 0 !important;
}
#navigation-dropdown ul {
float:left;
width:150px;
list-style:none;
margin:0;
padding:0;
}
#navigation-dropdown ul li {
float:left;
width:100%;
font-size:14px;
line-height:24px;
margin:0;
padding:0;
}
#navigation-dropdown ul li a {
color:#69C;
text-decoration:none;
}
#navigation-dropdown ul li a:hover {
text-decoration:underline;
}
#navigation-dropdown ul li a:active {
color:#dddddd;
}
#navigation-dropdown input {
float:left;
cursor:pointer;
color:#333333;
font-size:14px;
font-family:Arial, sans-serif;
}
</style>
Javascript:
<script>
<style>
html {
margin:0;
padding:0;
}
body {
font-size:100%;
font-family:Arial, sans-serif;
background-color:#ffffff;
margin:0;
padding:0;
}
#wrapper {
float:left;
position:relative;
width:640px;
margin:0;
padding:20px 50px 20px 50px;
}
#navigation {
float:left;
width:100%;
margin:0;
padding:0;
}
#navigation-sub {
float:left;
cursor:pointer;
color:#ffffff;
font-size:16px;
background-color:#69C;
margin:0;
padding:6px 15px 7px 15px;
}
#navigation-sub:hover {
background-color:#C66;
}
#navigation-sub:active {
background-color:#eeeeee;
}
#navigation-dropdown {
position: absolute;
top: 50px;
background-color:#eeeeee;
border:#69C 4px solid;
margin:0;
padding:15px 15px 15px 30px;
/*This here*/
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}
.hide {
opacity: 0;
height: 0 !important;
}
#navigation-dropdown ul {
float:left;
width:150px;
list-style:none;
margin:0;
padding:0;
}
#navigation-dropdown ul li {
float:left;
width:100%;
font-size:14px;
line-height:24px;
margin:0;
padding:0;
}
#navigation-dropdown ul li a {
color:#69C;
text-decoration:none;
}
#navigation-dropdown ul li a:hover {
text-decoration:underline;
}
#navigation-dropdown ul li a:active {
color:#dddddd;
}
#navigation-dropdown input {
float:left;
cursor:pointer;
color:#333333;
font-size:14px;
font-family:Arial, sans-serif;
}
</style>
Javascript:
<script>
function dropIt() {
toggleClass(document.getElementById('navigation-dropdown'), "hide");
}
function foldIt() {
toggleClass(document.getElementById('navigation-dropdown'), "hide");
}
function setHeight() {
var el = document.getElementById('navigation-dropdown');
el.style.height = el.clientHeight + "px";
}
var toggleClass = function (el, className) {
if (el) {
if (el.className.indexOf(className) != -1) {
el.className = el.className.replace(className, '');
} else {
el.className += ' ' + className;
}
}
};
setHeight();
</script>
HTML:
<body>
<div id="wrapper">
<div id="navigation">
<div id="navigation-sub" onclick="dropIt();">Click me</div>
</div>
<div id="navigation-dropdown">
<ul>
<li><a href="#">link one</a>
</li>
<li><a href="#">link two</a>
</li>
<li><a href="#">link three</a>
</li>
<li><a href="#">link four</a>
</li>
</ul>
<ul>
<li><a href="#">link five</a>
</li>
<li><a href="#">link six</a>
</li>
<li><a href="#">link seven</a>
</li>
<li><a href="#">link eight</a>
</li>
</ul>
<ul>
<li><a href="#">link nine</a>
</li>
<li><a href="#">link ten</a>
</li>
<li><a href="#">link eleven</a>
</li>
<li><a href="#">link twelve</a>
</li>
</ul>
<input type="button" value="X" onclick="foldIt()" />
</div>
</div>
</body>
toggleClass(document.getElementById('navigation-dropdown'), "hide");
}
function foldIt() {
toggleClass(document.getElementById('navigation-dropdown'), "hide");
}
function setHeight() {
var el = document.getElementById('navigation-dropdown');
el.style.height = el.clientHeight + "px";
}
var toggleClass = function (el, className) {
if (el) {
if (el.className.indexOf(className) != -1) {
el.className = el.className.replace(className, '');
} else {
el.className += ' ' + className;
}
}
};
setHeight();
</script>
HTML:
<body>
<div id="wrapper">
<div id="navigation">
<div id="navigation-sub" onclick="dropIt();">Click me</div>
</div>
<div id="navigation-dropdown">
<ul>
<li><a href="#">link one</a>
</li>
<li><a href="#">link two</a>
</li>
<li><a href="#">link three</a>
</li>
<li><a href="#">link four</a>
</li>
</ul>
<ul>
<li><a href="#">link five</a>
</li>
<li><a href="#">link six</a>
</li>
<li><a href="#">link seven</a>
</li>
<li><a href="#">link eight</a>
</li>
</ul>
<ul>
<li><a href="#">link nine</a>
</li>
<li><a href="#">link ten</a>
</li>
<li><a href="#">link eleven</a>
</li>
<li><a href="#">link twelve</a>
</li>
</ul>
<input type="button" value="X" onclick="foldIt()" />
</div>
</div>
</body>
No comments:
Post a Comment