2017

Meniu orizontal foarte simplu efect hover cu sageata


Acest meniu nu spun ca, este ceva nou si nici spectaculos dar este un meniu foarte simplu de aplicat, deschizi un nou gadget HTML/Javascript si adaugi codul de mai jos, daca esti atent, vezi unde se pot face modificari pentru adaptarea sa pe blogul tau.

Pentru url-link inlocuiesti ca de obicei cu link-ul care doresti sa apara, si Text 1-2-3-4-5-6 il schimbi cu descrierea ce vrei sa apara in meniu. Vezi cum arata meniul aici:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* poate sa fie "left", "right" o "center" */
font: bold 18px Georgia; /* marime litere */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spatiu intre link-uri */
}
ul.arrowunderline li a{ /* culoare text este neagra */
position:relative;
color:black;
padding-bottom:8px; /* distanta intre sageata si text */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosimea liniei de la sageata si culoarea este red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* culoarea liniei este red */
}
</style>

<ul class="arrowunderline">
<li><a href="url-link">Text 1</a></li>
<li><a href="url-link">Text 2</a></li>
<li class="selected"><a href="url-link">Text 3</a></li>
<li><a href="url-link">Text 4</a></li>
<li><a href="url-link">Text 5</a></li>
<li><a href="url-link">Text 6</a></li>
</ul>

SUCCES !

0 comentarios:

Trimiteți un comentariu

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc