<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--menu app gvnix NO COPIAR -->
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div version="2.0" id="header">
<div class="pull-left"><a title="Home" name="Home" href="/"><img src="http://geo-gvnix.rhcloud.com/resources/images/logo_gvnix.png"></a></div>
<div class="pull-right"><a title="Home" name="Home" href="/" class="navbar-brand nav navbar-right">Petclinic</a></div></div>
<div version="2.0" id="menu"><div class="navbar-header pull-left">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="icon-bar"> </span><span class="icon-bar"> </span><span class="icon-bar"> </span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="_menu">
<li id="c_owner" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Owner <b class="caret"> </b></a>
<ul class="dropdown-menu"><li id="i_owner_new"><a title="Create new Owner" href="/owners?form">Create new Owner</a></li>
<li id="i_owner_list"><a title="List all Owners" href="/owners?page=1&size=10">List all Owners</a></li>
<li id="i_owner_report_owners_report"><a title="Owner report_owners Report" href="/owners/reports/report_owners?form">Owner report_owners Report</a></li>
</ul>
</li><li id="c_vet" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Vet <b class="caret"> </b></a><ul class="dropdown-menu">
<li id="i_vet_new"><a title="Create new Vet" href="/vets?form">Create new Vet</a></li>
<li id="i_vet_list"><a title="List all Vets" href="/vets?page=1&size=10">List all Vets</a></li></ul></li><li id="c_visit" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Visit <b class="caret"> </b></a><ul class="dropdown-menu"><li id="i_visit_new"><a title="Create new Visit" href="/visits?form">Create new Visit</a></li><li id="i_visit_list"><a title="List all Visits" href="/visits?page=1&size=10">List all Visits</a></li><li id="fi_visit_descriptionandvisitdate"><a title="Find by Description And Visit Date" href="/visits?find=ByDescriptionAndVisitDate&form&page=1&size=10">Find by Description And Visit Date</a></li><li id="fi_visit_descriptionlike"><a title="Find by Description Like" href="/visits?find=ByDescriptionLike&form&page=1&size=10">Find by Description Like</a></li><li id="fi_visit_visitdatebetween"><a title="Find by Visit Date Between" href="/visits?find=ByVisitDateBetween&form&page=1&size=10">Find by Visit Date Between</a></li></ul></li><li id="c_pet" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Pet <b class="caret"> </b></a><ul class="dropdown-menu"><li id="i_pet_new"><a title="Create new Pet" href="/pets?form">Create new Pet</a></li><li id="i_pet_list"><a title="List all Pets" href="/pets?page=1&size=10">List all Pets</a></li><li id="fi_pet_nameandweight"><a title="Find by Name And Weight" href="/pets?find=ByNameAndWeight&form&page=1&size=10">Find by Name And Weight</a></li><li id="fi_pet_owner"><a title="Find by Owner" href="/pets?find=ByOwner&form&page=1&size=10">Find by Owner</a></li><li id="fi_pet_sendremindersandweightlessthan"><a title="Find by Send Reminders And Weight Less Than" href="/pets?find=BySendRemindersAndWeightLessThan&form&page=1&size=10">Find by Send Reminders And Weight Less Than</a></li><li id="fi_pet_typeandnamelike"><a title="Find by Type And Name Like" href="/pets?find=ByTypeAndNameLike&form&page=1&size=10">Find by Type And Name Like</a></li></ul></li><li id="c_seleniumtests" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Selenium Tests <b class="caret"> </b></a><ul class="dropdown-menu"><li id="si_seleniumtests_test"><a title="Test Suite" href="/resources/selenium/test-suite.xhtml">Test Suite</a></li></ul></li><li id="c_map_menu_category" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Maps <b class="caret"> </b></a><ul class="dropdown-menu"><li id="i_map_menu_category_mapview_map_menu_entry"><a title="Mapview" href="/mapview">Mapview</a></li><li id="i_map_menu_category_map_map_menu_entry"><a title="Map" href="/map">Map</a></li></ul></li><li id="c_monitoring_menu_category" class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Monitoring <b class="caret"> </b></a><ul class="dropdown-menu"><li id="i_monitoring_menu_category_monitoring_menu_entry"><a title="JMelody Monitoring" href="/monitoring">JMelody Monitoring</a></li></ul></li></ul></div></div>
</div>
</header>
<!-- nav global -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".global-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu global</a>
</div>
<div class="collapse navbar-collapse global-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Opción A</a></li>
<li><a href="#">Opción B</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Opción C <b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
<!--nav sidebar -->
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".view-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menú<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-transfer"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse view-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Global<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-align-justify"></span></a></li>
<li class="dropdown last">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Vista <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</aside>
<div class="main">
<!-- Content Here -->
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</p>
</div>
/* Adding gvnix styles css - NO COPIAR */
@import 'http://geo-gvnix.rhcloud.com/resources/styles/standard.css';
/* Custom fixed navs */
header.navbar+nav.navbar{
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top{
margin-top: 50px;
}
.sidebar.navbar-fixed-top{
margin-top: 100px;
}
@media (min-width: 768px) and (max-width: 998px){
.navbar.navbar-default.navbar-fixed-top{
margin-top: 100px;
}
.sidebar.navbar-fixed-top{
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a{
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover{
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
@media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav{
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover{
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last{
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
@media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
