0
Ich stieß auf ein Problem, das ich lösen muss, um die Website zu präsentieren.Wie kann ich die untere Randanimation auf meiner Website hinzufügen?
Die Grenze, wenn ich schwebe mein Menü bewegt sich nicht nach oben, nur meine Schriftart bewegt sich ein wenig nach oben.
.srt-menu li a {
transition: 0.3s ease;
background: #3fa46a;
color: red;
font-size: 20px;
text-decoration: none;
padding: 0px 0;
margin: 0 0px;
}
.srt-menu li a:hover{
transition: 0.3s ease;
background: transparent;
color: #1aa8a4;
text-decoration: none;
border-top: 1px solid red;
border-bottom: 4px solid #3fa46a;
padding: 0px 0;
margin: 0 0px;
}
.srt-menu li li a {
background:#e8e8e8;
padding-left:40px;
}
.srt-menu li li li a {
background:#efefef;
padding-left:80px;
}
/*SECONDARY MENU*/
#secondary-navigation{
margin-bottom:60px;
}
``#secondary-navigation ul{
margin:0;
padding:0;
}
#secondary-navigation ul li a{
background:#E6E6E6;
display:block;
margin:5px 0;
padding:10px;
text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
transition: 0.3s ease;
background: red;
color: #ffffff;
text-decoration: none;
border-top: 0px solid transparent;
border-bottom: 4px solid #3fa46a;
padding: 24px 0;
}
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin-bottom:40px;
/*positioning and padding*/
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
/*FOOTER*/
footer{
\t clear:both;
\t font-size:80%;
\t padding:20px 0;
}
footer ul{
\t margin:0;
\t padding:0;
}
/*colors and backgrounds*/
body{
\t background:#fff;
}
h1, h2, h3, h4, h5, h6{
\t color:#333;
}
footer{
\t background:#333;
\t color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{
\t color:#CCC;
\t margin-bottom:10px;
}
footer ul{
\t margin:0 0 0 8%;
}
a.buttonlink{
\t background:#0099ff;
\t border-radius:7px;
\t color:#fff;
\t display:block;
\t float:left;
\t margin:10px 15px 10px 0;
\t padding:10px;
\t text-decoration:none;
}
a.buttonlink:hover{
\t background:#8dbc01;
}
.greenelement{
\t background:#5ec79e;
\t color:#fff;
}
.violetelement{
\t background:#887dc2;
\t color:#fff;
}
/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
aside {
\t float:right;
\t width:30%;
}
/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
.srt-menu, .srt-menu * {
\t margin: \t \t \t 0;
\t padding: \t \t 0;
\t list-style: \t \t none;
}
.srt-menu ul {
\t position: \t \t absolute;
\t display:none;
\t width: \t \t \t 12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
\t width: \t \t \t 100%;
}
.srt-menu li:hover {
\t visibility: \t \t inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
\t float: \t \t \t left;
\t position: \t \t relative;
\t margin-left:1px;
}
.srt-menu li li {
\t margin-left:0px;
}
.srt-menu a {
\t display: \t \t block;
\t position: \t \t relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
\t display:block;
\t left: \t \t \t 0;
\t top: \t \t \t 45px; /* match top ul list item height */
\t z-index: \t \t 99;
\t -webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
\t top: \t \t \t -999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
\t left: \t \t \t 12em; /* match ul width */
\t top: \t \t \t 0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
\t top: \t \t \t -999em;
}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
\t left: \t \t \t 10em; /* match ul width */
\t top: \t \t \t 0;
}
/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
\t float:right;
\t margin: .35em 0 0 0;
}
.srt-menu a {
\t text-decoration:none;
}
.srt-menu li a {
\t background:#fff;
\t margin:0;
\t padding:10px 20px;
\t height:45px;
}
.srt-menu a, .srt-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
\t color: \t \t \t #0099ff; \t
}
.srt-menu li li a {
\t \t border-top: \t \t 1px solid rgba(255,255,255,.2);
\t \t background: \t \t #333; /*fallback for old IE*/
\t \t background:rgba(0,0,0,.6);
\t \t color: \t #fff;
\t \t padding-left:20px;
\t \t height:auto;
}
.srt-menu li li a:visited{color:#fff;}
.srt-menu li li li a,
.srt-menu li.current * li a{
\t padding-left:20px;
\t background:rgba(0,0,0,.6);
}
.srt-menu li:hover > a,
transition: 0.3s ease;
background: transparent;
color: #1aa8a4;
text-decoration: none;
border-top: 0px solid transparent;
border-bottom: 4px solid #3fa46a;
padding: 24px 0;
}
.srt-menu li li:hover > a{
\t color:green;
\t background:#0099ff;
}<nav id="topnav" role="navigation">
<div class="menu-toggle">Menu</div>
<ul class="srt-menu" id="menu-main-navigation"><li class="current"><a href="http://zgraggen-zahnarzt.ch" target="_top" title="Start">Start</a><ul><li><a href="http://zgraggen-zahnarzt.ch/pages/start/test.php" target="_top" title="Test">Test</a></li></ul></li><li><a href="http://zgraggen-zahnarzt.ch/pages/kontakt.php" target="_top" title="Kontakt">Kontakt</a></li><li><a href="http://zgraggen-zahnarzt.ch/pages/oeffnungszeiten.php" target="_top" title="Öffnungszeiten">Öffnungszeiten</a></li><li><a href="http://zgraggen-zahnarzt.ch/pages/anfahrt.php" target="_top" title="Anfahrt">Anfahrt</a></li><li><a href="http://zgraggen-zahnarzt.ch/pages/testststst.php" target="_top" title="testststst">testststst</a></li></ul> </nav><!-- #topnav -->
<!-- main content area -->
<div class="wrapper" id="main">Werfen Sie einen Blick auf meine website wo Sie das Problem in Aktion sehen können.
Wie kann ich das Menü wie here aussehen?
Ich möchte die untere Grenze bewegen, wenn ich darauf schweben, und ausziehen, wenn ich die "Schaltfläche" verlassen.
Backend? Das Menü als solches sollte auf der rechten Seite sichtbar sein –
Sie haben take out content = "no" und aktualisieren Sie die Seite – mlegg