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; height: 4em;
width: 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> </head>
<body> <body>
<div class="navbar"> <div id="topbar">
<div class="navbar-inner"> <div class="navigation">
<div class="container"> <ul class="nav nav-pills" >
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <li class="active">
<span class="icon-bar"></span> <a class="image-link" >
<span class="icon-bar"></span> <img class="chapter-image" src="img/firefox.png" >
<span class="icon-bar"></span> <p>Subtitle</p>
</a> </a>
<div class="nav-collapse"> </li>
<li class="">
<ul class="nav"> <a class="image-link" >
<li class="active"> <img class="chapter-image" src="img/firefox.png" >
<a class="image-link" > <p>Subtitle</p>
<img class="chapter-image" src="img/firefox.png" > </a>
<p>Subtitle</p> </li>
</a> <li class="">
</li> <a class="image-link" >
<li class=""> <img class="chapter-image" src="img/firefox.png" >
<a class="image-link" > <p>Subtitle</p>
<img class="chapter-image" src="img/firefox.png" > </a>
<p>Subtitle</p> </li>
</a> </ul>
</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>
</div> </div>
<a id="nav-button" class="pull-right" href="#">Nav me!! <i class="icon-chevron-down
icon-white"></i> </a>
</div> </div>
<div id="left-hidden"> <div style="clear: both;"></div>
</div> <div id="wrapper">
<div id="main" class="span12"> <div id="left-hidden">
fopjefoj apojpefjpwj pwej epfj </div>
</div> <div id="main" class="span12">
<div id="right-hidden"> fopjefoj apojpefjpwj pwej epfj
</div>
<div id="right-hidden">
</div>
</div> </div>
<script> <script>
$(".collapse").collapse(); $(".collapse").collapse();
$(".navbar-inner").hover(function(){
$(this).height('0.2em'); $(document).ready(function() {
},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> </script>
</body> </body>
</html> </html>