Animacja menu, bootstrap

Question

Witam posiadam takie menu górne.

Napisane w taki sposób

<nav class="navbar navbar-default" id="menu" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button><!-- navbar-toggle -->
    </div><!-- navbar-header -->
    <div class="container" id="container">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="?src=home">Test1</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test2<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="?src=info&page=1">Test2-1</a></li>
                        <li><a href="?src=info&page=2">Test2-2</a></li>
                        <li><a href="?src=info&page=3">Test2-3</a></li>
                        <li><a href="?src=info&page=4">Test2-4</a></li>
                        <li><a href="?src=info&page=5">Test2-5</a></li>
                        <li><a href="?src=info&page=6">Test2-6</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    &nbsp;
                </li>
                <li class="dropdown" id="lista">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test3<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="?src=info&page=1">Test3-1</a></li>
                        <li><a href="?src=info&page=2">Test3-2</a></li>
                        <li><a href="?src=info&page=3">Test3-3</a></li>
                        <li><a href="?src=info&page=4">Test3-4</a></li>
                        <li><a href="?src=info&page=5">Test3-5</a></li>
                        <li><a href="?src=info&page=6">Test3-6</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="?&src=contact">Test4</a></li>
            </ul>
        </div>
    </div>
</nav>

plus css

body{
	font-family: 'Lato', sans-serif;
	color:#2f1690;
}
/* menu */
#menu{
	width:100%;
	z-index:1000;
}


.navbar-nav{
	float:none;
}
@media(min-width:768px){
	.navbar-nav>li{
		width:20%;
		text-align:center;
	}
}

I podpiętym bootstrap i jq. I chciał bym aby po najechaniu na test2-jakiś tam, zrobiło mi się coś takiego(uwaga super rysunek w paincie

Objaśnienie: najeżdżam rozszerza się o jeden w dół(podwaja),napis przesuwa się na prawo na środek a po lewej pojawia się miniaturka, czy tam po prostu małe zdjęcie. I tak żeby było to zaanimowane. Jakaś rada jak to zrb jakich tajnych technik magi js użyć. Bo nie mam o tym zielonego pojęcia. Bardzo proszę o pomoc :) 

 

Comments

Bo nie sądze żeby w css dało się to zrobić, chyba że się da?

---

a dwa napis za cholerę nie ustawia się na środku :(

spanish to english

Answer 1

Zrobiłem coś na zasadzie że blok zdjęcia ma 0 szerokości i animacją zwiększa, ale 1. działa na wszystkie na raz, a dwa napis za cholerę nie ustawia się na środku :(

Answer 2

słabo objaśnione

sam mały obrazek możesz zrobić w css , klasa i hover, to będzie bez klikania się pojawiał

Comments

Już to wykonałem przy użyciu jq, tylko nie wiem jak zrobić żeby mi łapało tylko jedno, a nie wszystkie. Ale to już sam rozwiąże :)

---

w jakim sensie łapało wszystkie?

---

https://forum.pasja-informatyki.pl/250253/jq-animacja-tylko-jednego-bloku#a250261

tutaj zostało mi już wyjaśnione i opisane :)