Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
autor |
sõnum |
|
Karlapoiss
HV kasutaja
liitunud: 13.02.2008
|
27.10.2016 17:49:42
HTML/CSS - borderi efekt menüüs |
|
|
Oleks vaja abi ühe efektiga,
Mitu päeva juba pealt näha lihtsa asjaga mässanud
See kuldne joon mis tekib alammenüüle peaks sujuvalt sisse jooksma vasakult paremale kui minna peale ülemmenüü elemendile, ehk efekt tekib siis kui liikuda Leht1/leht2 peale, mitte alles siis kui alammenüüs ringi liikuda.
Hetkel olemas:
https://jsfiddle.net/907bwv0o/
HTML
Spoiler
<nav id="menu" class="menu">
<ul class="dropdown">
<li><a href="#">leht</a></li>
<li class="active">
<a href="#">leht1</a>
<ul class="dropdown_nav">
<li class="dropdown_first active_drop">
<a href="#">leht1.1</a></li>
<li class="dropdown_last"><a href="#">leht1.2</a></li>
</ul>
</li>
<li>
<a href="#">leht2</a>
<ul class="dropdown_nav">
<li class="dropdown_first"><a href="#">leht2.1</a></li>
<li><a href="#">leht2.2</a></li>
</ul>
</li>
<li><a href="#">leht3</a></li>
<li><a href="#">leht4</a></li>
</ul>
</nav> |
CSS
Spoiler
.menu {
width: 100%;
height: auto;
background: white;
transition: all 0.3s ease;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
width:100%;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #f4f4f4;
border: 1px solid #fff;
}
.menu ul li { padding: 0px; }
.menu ul li.active a{
font-weight:600;
}
.second_menu ul li.active a{
font-weight:600;
}
.menu > ul > li { display: inline-block; }
.menu ul li a {
display: block;
text-decoration: none;
color: black;
font-family: 'Lato';
font-weight:400;
font-size:14px;
}
.menu ul li a:hover {
color: black;
}
.menu ul li.hover > a {
color: black;
}
.menu ul li > a { padding: 15px; }
.menu ul ul {
display: none;
position: absolute;
top: 100%;
width:auto;
background: white;
}
.dropdown_nav{
border-top: 1px solid #b6945d;
}
.menu ul li.active_drop a{
font-weight:600 !important;
color:#b6945d;
}
.menu ul li ul.dropdown_nav li a{
font-weight:400;
}
.menu ul li.active_drop a:hover{
color:#b6945d;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
display: inline;
float: left;
width: auto;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: white;
font-style:italic;
}
.menu ul ul > li a:hover {
color: black;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
} |
_________________ Kodulehe valmistamine - küsi pakkumist! |
|
Kommentaarid: 28 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
28 |
|
tagasi üles |
|
|
VilX
HV kasutaja
liitunud: 02.05.2005
|
27.10.2016 19:14:46
|
|
|
Hetkel ma mingit animatsiooni praeguses fiddle'is ei näe.
Kas ma saan õigesti aru, et soovid animeerida kuldset borderit vasakult paremale jooksma sel hetkel, kui hover on esimese taseme menüül?
_________________ remato.com - lihtne ja usaldusväärne tööajaarvestus ehitusettevõtetele |
|
Kommentaarid: 25 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
23 |
|
tagasi üles |
|
|
Karlapoiss
HV kasutaja
liitunud: 13.02.2008
|
27.10.2016 19:28:25
|
|
|
VilX kirjutas: |
Hetkel ma mingit animatsiooni praeguses fiddle'is ei näe.
Kas ma saan õigesti aru, et soovid animeerida kuldset borderit vasakult paremale jooksma sel hetkel, kui hover on esimese taseme menüül? |
Täpselt.
_________________ Kodulehe valmistamine - küsi pakkumist! |
|
Kommentaarid: 28 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
28 |
|
tagasi üles |
|
|
VilX
HV kasutaja
liitunud: 02.05.2005
|
27.10.2016 22:36:18
|
|
|
Karlapoiss kirjutas: |
VilX kirjutas: |
Hetkel ma mingit animatsiooni praeguses fiddle'is ei näe.
Kas ma saan õigesti aru, et soovid animeerida kuldset borderit vasakult paremale jooksma sel hetkel, kui hover on esimese taseme menüül? |
Täpselt. |
Midagi sellist siis: https://jsfiddle.net/907bwv0o/3/ ?
|
|
Kommentaarid: 25 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
23 |
|
tagasi üles |
|
|
Karlapoiss
HV kasutaja
liitunud: 13.02.2008
|
27.10.2016 23:34:19
|
|
|
VilX kirjutas: |
Karlapoiss kirjutas: |
VilX kirjutas: |
Hetkel ma mingit animatsiooni praeguses fiddle'is ei näe.
Kas ma saan õigesti aru, et soovid animeerida kuldset borderit vasakult paremale jooksma sel hetkel, kui hover on esimese taseme menüül? |
Täpselt. |
Midagi sellist siis: https://jsfiddle.net/907bwv0o/3/ ? |
Just nii, suur tänu
_________________ Kodulehe valmistamine - küsi pakkumist! |
|
Kommentaarid: 28 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
28 |
|
tagasi üles |
|
|
|
lisa lemmikuks |
|
|
sa ei või postitada uusi teemasid siia foorumisse sa ei või vastata selle foorumi teemadele sa ei või muuta oma postitusi selles foorumis sa ei või kustutada oma postitusi selles foorumis sa ei või vastata küsitlustele selles foorumis sa ei saa lisada manuseid selles foorumis sa võid manuseid alla laadida selles foorumis
|
|