ca7119804c
- kleinere Design-/Layoutkorrekturen geändert: css/cwsvJudo-2018-content.css geändert: css/cwsvJudo-2018-galTable.css geändert: css/cwsvJudo-2018-mainNav.css geändert: css/cwsvJudo-2018-subNav.css geändert: md/verein.md geändert: pandocTemplate/cwsvJudo.html5.pandocTemplate geändert: phpLib/cwsvJudo/wkKalender.php neue Datei: temp/vertNavBarTest.html geändert: yaml/galerien.subNav.yaml geändert: yaml/index.subNav.yaml geändert: yaml/kontakt.subNav.yaml geändert: yaml/mainNav.yaml geändert: yaml/navTargets.yaml geändert: yaml/trainingszeiten.subNav.yaml geändert: yaml/verein.subNav.yaml geändert: yaml/wkKalender.subNav.yaml
143 lines
2.6 KiB
HTML
143 lines
2.6 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
ul
|
|
{
|
|
margin:0px;
|
|
padding:0px;
|
|
list-style-type:none;
|
|
-webkit-backface-visibility: hidden; backface-visibility: hidden;
|
|
}
|
|
.var_nav
|
|
{
|
|
position:relative;
|
|
background:#ccc;
|
|
width:300px;
|
|
height:70px;
|
|
margin-bottom:5px;
|
|
}
|
|
.link_bg
|
|
{
|
|
width:70px;
|
|
height:70px;
|
|
position:absolute;
|
|
background:#E01B6A;
|
|
color:#fff;
|
|
z-index:2;
|
|
}
|
|
.link_bg i
|
|
{
|
|
position:relative;
|
|
}
|
|
.link_title
|
|
{
|
|
position:absolute;
|
|
width:100%;
|
|
z-index:3;
|
|
color:#fff;
|
|
}
|
|
.link_title:hover .icon
|
|
{
|
|
-webkit-transform:rotate(360deg);
|
|
-moz-transform:rotate(360deg);
|
|
-o-transform:rotate(360deg);
|
|
-ms-transform:rotate(360deg);
|
|
transform:rotate(360deg);
|
|
}
|
|
.var_nav:hover .link_bg
|
|
{
|
|
width:100%;
|
|
background:#E01B6A;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
-moz-transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
-ms-transition: all 0.3s ease-in-out;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.var_nav:hover a
|
|
{
|
|
font-weight:bold;
|
|
-webkit-transition:all .5s ease-in-out;
|
|
-moz-transition:all .5s ease-in-out;
|
|
-o-transition:all .5s ease-in-out;
|
|
-ms-transition:all .5s ease-in-out;
|
|
transition:all .5s ease-in-out;
|
|
}
|
|
.icon
|
|
{
|
|
position:relative;
|
|
width:70px;
|
|
height:70px;
|
|
text-align:center;
|
|
color:#fff;
|
|
-webkit-transition:all .5s ease-in-out;
|
|
-moz-transition:all .5s ease-in-out;
|
|
-o-transition:all .5s ease-in-out;
|
|
-ms-transition:all .5s ease-in-out;
|
|
float:left;
|
|
transition:all .5s ease-in-out;
|
|
float:left;
|
|
}
|
|
.icon i{top:22px;position:relative;}
|
|
a{
|
|
display:block;
|
|
position:absolute;
|
|
float:left;
|
|
font-family:arial;
|
|
color:#fff;
|
|
text-decoration:none;
|
|
width:100%;
|
|
height:70px;
|
|
text-align:center;
|
|
}
|
|
span
|
|
{
|
|
margin-top:25px;
|
|
display:block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<UL>
|
|
<li class="var_nav">
|
|
<div class="link_bg"></div>
|
|
<div class="link_title">
|
|
<div class=icon>
|
|
<i class="icon-mobile-phone icon-2x"></i>
|
|
</div>
|
|
<a href="#"><span>About Us</span></a>
|
|
</div>
|
|
</li>
|
|
<li class="var_nav">
|
|
<div class="link_bg"></div>
|
|
<div class="link_title">
|
|
<div class=icon>
|
|
<i class="icon-lightbulb icon-2x"></i>
|
|
</div>
|
|
<a href="#"><span>Ideas</span></a>
|
|
</div>
|
|
</li>
|
|
<li class="var_nav">
|
|
<div class="link_bg"></div>
|
|
<div class="link_title">
|
|
<div class=icon>
|
|
<i class="icon-wrench icon-2x"></i>
|
|
</div>
|
|
<a href="#"><span>Services</span></a>
|
|
</div>
|
|
</li>
|
|
<li class="var_nav">
|
|
<div class="link_bg"></div>
|
|
<div class="link_title">
|
|
<div class=icon>
|
|
<i class="icon-briefcase icon-2x"></i>
|
|
</div>
|
|
<a href="#"><span>Marketing</span></a>
|
|
</div>
|
|
</li>
|
|
</UL>
|
|
</nav>
|
|
</body>
|
|
</html>
|