Tråd bedømmelse:
  • 0 Stemmer - 0 Gennemsnit
  • 1
  • 2
  • 3
  • 4
  • 5
css
11-01-2017, 12:52
#1
css
Hej Shellsec.
Jeg er igang med at lave en menu bar hvor der skal være en hover effect der gør at der kommer text frem ved siden af min icon. Det har jeg gjort, men jeg vil gerne have at det popper frem sådan "smooth". Sådan så at det ikke bare kommer direkte. Håber nogle kan hjælpe. 
gif:
https://gyazo.com/1fb97c80bce276d2165dbd5b417f9cfa
CSS:
Kode:
.navigationmenu {

}

.navigationmenu nav {
float: left;
position: fixed;
}

.navigationmenu nav ul {

}

.navigationmenu nav ul a {

}

.navigationmenu nav ul a li {
list-style-type: none;
width: 70px;
height: 70px;
background-color: beige;
border: 1px solid lightgray;
display: block;
font-weight: bold;
font-size: 14px;
transition: 250ms;
line-height: 65px;
text-align: center;
overflow: hidden;
}


.navigationmenu nav ul a li i {
font-size: 25px;
margin-right: 10px;
}

.navigationmenu nav ul a li:hover {
width: 140px;
visibility: visible;
}
HTML: 
Kode:
<header>

<div class="navigationmenu">
<nav>
<ul>
<a href="home.html"><li><i class="ion-ios-home"></i>Home</li></a>
<a href="work.html"><li><i class="ion-ios-compose"></i>Work</li></a>
<a href="portfolio.html"><li><i class="ion-briefcase"></i>Portfolio</li></a>
<a href="contact.html"><li><i class="ion-android-contact"></i>Contact</li></a>
</ul>
</nav>
</div>

</header>
Håber nogle kan hjælpe :)
Find alle beskeder fra denne bruger
Citer denne besked i et svar
12-01-2017, 00:15 (Denne besked var sidst ændret: 12-01-2017, 00:18 af Nightmare Essence.)
#2
RE: css
Tænker at det er det her du mener :) - http://www.w3schools.com/css/tryit.asp?f...ransition1

http://www.w3schools.com/css/css3_transitions.asp
Find alle beskeder fra denne bruger
Citer denne besked i et svar
« Ældre | Nyere »




User(s) browsing this thread: 1 Gæst(er)