<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 ----------> <div class="container"> <div class="row"> <h1 class="text-center">Mehrsprachiges Menü</h1> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <ul class=" pull-left langswitch" > <li class="deu"><a href="#" class="language" rel="de-DE"><img src="images/de.png" alt="Deutsch" width="40"/></a></li> <li class="eng"><a href="#" class="language" rel="en-US"><img src="images/gb.png" alt="English" width="40"/></a></li> <li class="ita"><a href="#" class="language" rel="it-IT"><img src="images/it.png" alt="Italiano" width="40"/></a></li> <li><a href="/rss.xml"><img src="images/rss.png" alt="RSS" width="40"></a></li> </ul> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- Deutsch --> <div class="multi-lang animated fadeInDown" > <ul class="nav navbar-nav" id="deutsch"> <li><a href="#news" class="active">Neues</a></li> <li><a href="#genealogy">Genealogie</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Aktion </a></li> <li><a href="#">andere Aktion</a></li> </ul> </li> <li><a href="#photos">Fotos</a></li> <li><a href="#roleplaying">Rollenspiel</a></li> <li><a href="#Forum">Forum</a></li> <li><a href="#crafting">Basteleien</a></li> </ul> <!-- Englisch --> <ul class="nav navbar-nav" id="english"> <li><a href="#news" class="active">News</a></li> <li><a href="#genealogy">Genealogy</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action </a></li> <li><a href="#">Another action</a></li> </ul> </li> <li><a href="#photos">Photos</a></li> <li><a href="#roleplaying">Roleplaying</a></li> <li><a href="#Forum">Forum</a></li> <li><a href="#crafting">Crafting</a></li> </ul> <!-- Italienisch --> <ul class="nav navbar-nav" id="italo"> <li><a href="#news" class="active">Novità</a></li> <li><a href="#genealogy">Genealogia</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Discesa <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Azione </a></li> <li><a href="#">altra Azione</a></li> </ul> </li> <li><a href="#photos">Foto</a></li> <li><a href="#roleplaying">Gioco di ruolo</a></li> <li><a href="#Forum">Forum</a></li> <li><a href="#crafting">Bricolage</a></li> </ul> <!-- Switcher --> <ul class="nav navbar-nav navbar-right "> <li class="deu"><a href="#" class="language" rel="de-DE"><img src="images/de.png" alt="Deutsch" width="30" title="deutsch"/></a></li> <li class="eng"><a href="#" class="language" rel="en-US"><img src="images/gb.png" alt="English" width="30" title="englisch" /></a></li> <li class="ita"><a href="#" class="language" rel="it-IT"><img src="images/it.png" alt="Italiano" width="30" title="italiano" /></a></li> </ul> </div> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div> </div>

#english{ display:none; } #italo{ display:none; } .langswitch>li{ display: none; } textarea{ width:100%; height:500px; } @media (max-width: 767px) { .navbar-right{ display:none; } #english { top: 60px; } #italo { top: 60px; } .langswitch>li{ display: inline; padding-right:10px; } }

var animationsname = "animated fadeInDown"; $(document).ready(function () { "use strict"; $(".eng").click(function () { $("#english").css("display", "inline"); $("#english").addClass(animationsname); $("#deutsch").css("display", "none"); $("#italo").css("display", "none"); }); $(".deu").click(function () { $("#deutsch").css("display", "inline"); $("#deutsch").addClass(animationsname); $("#italo").css("display", "none"); $("#english").css("display", "none"); }); $(".ita").click(function () { $("#italo").css("display", "inline"); $("#italo").addClass(animationsname); $("#english").css("display", "none"); $("#deutsch").css("display", "none"); }); });