Witam. Mam takie menu
Chciałbym zrobić żeby po kliknięciu np w lupkę wysuwała się taka tacka z napisem szukaj. Jest jakiś poradnik albo by mnie ktoś nakierował jak to ugryźć (zrobić). Na szybko zrobiłem o co mi chodzi
Taki mam kod i z góry dziękuję za wszelaką pomoc :)
.nav-shadow {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #f7f7f7;
}
.nav-shadow li a {
display: block;
text-indent: -500em;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.nav-shadow li a:hover,
.nav-shadow li:first-child a{
background-color: blueviolet;
color: #fff;
}
/* class for current item */
.nav-shadow li.cbp-vicurrent a {
background: #fff;
color: blueviolet;
}
.nav-shadow li a:before {
font-family: 'ecoico';
speak: none;
font-style: normal;
font-weight: normal;
text-indent: 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.nav-shadow li a.icon-logo:before {
content: "S";
font-weight: 700;
font-size: 300%;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
.icon-search:before {
content: "\e004";
}
.icon-archive:before {
content: "\e005";
}
.icon-download:before {
content: "\e006";
}
.icon-location:before {
content: "\e007";
}
.icon-images:before {
content: "\e009";
}
.icon-pencil:before {
content: "\e008";
}
/* Example for media query (depends on total height of menu) */
@media screen and (max-height: 34.9375em) {
.nav-shadow {
font-size: 70%;
}
}
<ul class="nav-shadow">
<li><a href="#" class="icon-logo">Logo</a></li>
<li><a href="test.html" class="icon-archive">Archive</a></li>
<li><a href="#" class="icon-search">Search</a></li>
<li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
<li><a href="#" class="icon-location">Location</a></li>
<li><a href="#" class="icon-images">Images</a></li>
<li><a href="#" class="icon-download">Download</a></li>
</ul>