pingu_98/cern-summer-webfest
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navigation much better: still much work to do

Browse source
This commit is contained in:
João Batista 2012-08-04 20:01:10 +02:00
parent e1115ca8c7
commit 6841056981
2 changed files with 74 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/structure.css
View file

@ -2,3 +2,24 @@
height: 4em;
width: 4em;
}
.navigation {
background: #2C2C2C;
overflow: hidden;
}
#topbar {
width:100%;
position: absolute;
}
#nav-button {
border-radius: 0px 0px 20px 20px ;
background: #2C2C2C;
margin: 0px;
padding: 0.5em;
padding-right: 1em;
padding-left: 1em;
margin-right: 5em;
}

100
main.html
View file

@ -19,59 +19,65 @@
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div id="topbar">
<div class="navigation">
<ul class="nav nav-pills" >
<li class="active">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Subtitle</p>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Subtitle</p>
</a>
</li>
<li class="">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Subtitle</p>
</a>
</li>
<li class="">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Subtitle</p>
</a>
</li>
<li class="">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Hide it!</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Subtitle</p>
</a>
</li>
<li class="">
<a class="image-link" >
<img class="chapter-image" src="img/firefox.png" >
<p>Subtitle</p>
</a>
</li>
</ul>
</div>
<a id="nav-button" class="pull-right" href="#">Nav me!! <i class="icon-chevron-down
icon-white"></i> </a>
</div>
<div id="left-hidden">
</div>
<div id="main" class="span12">
fopjefoj apojpefjpwj pwej epfj
</div>
<div id="right-hidden">
<div style="clear: both;"></div>
<div id="wrapper">
<div id="left-hidden">
</div>
<div id="main" class="span12">
fopjefoj apojpefjpwj pwej epfj
</div>
<div id="right-hidden">
</div>
</div>
<script>
$(".collapse").collapse();
$(".navbar-inner").hover(function(){
$(this).height('0.2em');
},function(){});
$(document).ready(function() {
var original_height = $(".navigation").height();
$(".navigation").height('0em');
$("#nav-button").click(function(){
if ( $(".navigation").height() == 0) {
$(".navigation").animate({
'height' : original_height }
);
$("#nav-button").find('i').attr('class', 'icon-chevron-up icon-white');
} else {
$(".navigation").animate({
'height' : '0em'
}
);
$("#nav-button").find('i').attr('class', 'icon-chevron-down icon-white');
}
});
});
</script>
</body>
</html>