Pionowe multi levelowe menu - rozsuwane

Question

Witam.

Co prawda jestem nowy, a to mój pierwszy post lecz już nie raz przeglądałem choć by to forum. Przechodząc do rzeczy..

Chciałbym się zapytać czy ktoś posiada jakiś fajny i najprostszy poradnik lub będzie umiał mi wytłumaczyć jak stworzyć takie menu. Dokładniej rzecz mówiąc chodzi mi o pionowe menu składające się np. z pięciu kategorii. Dajmy na to że teraz kliknę w kategorię pierwszą rozsunie mi się całe menu w dół pokazując resztę kategorii zagnieżdżonych w tej sekcji. No i wiadomo klikając w drugą kategorie pierwsza mi się zwija pokazuje się to co ma druga..

Szukam i szukam po necie jakiegoś poradnika ale nigdzie go nie mogę znaleźć..

Dzięki śliczne za pomoc jak i wszelkie informację z góry.
Pozdrawiam,
Patryk

Answer 1

.menu-ul {
	list-style-type: none;
	-webkit-padding-start: 0;
}

.menu-ul input {
    position: absolute;
    display: none;
}

.menu-ul label,
.menu-ul a {
	color: white;
	text-decoration: none;
	display: block;
	padding: 3px 0 3px 0px;
	font-weight: normal;
	margin: 0;
}

.menu-ul label:hover,
.menu-ul a:hover {
	background-color: #4a4a4a;
	cursor: pointer;
}

.menu-ul li {
    position: relative;
}

.menu-ul ul {
	list-style-type: none;
	-webkit-padding-start: 30px;
}

.menu-ul > li > ul {
	border-top: 1px solid #636363;
	border-bottom: 1px solid #161616;
}

.menu-ul > li > label,
.menu-ul > li > a {
    display: block;
    border-bottom: 1px solid #161616;
    border-top: 1px solid #636363;
    padding-left: 10px;
}

.menu-ul > li ul label,
.menu-ul > li ul a {
    display: block;
    padding-left: 10px;
}

.menu-ul > li li:before {
    position: absolute;
    content: '';
    left: -10px;
    width: 2px;
    height: 100%;
    background-color: #525252;
}

.menu-ul > li li:after {
    position: absolute;
    content: '';
    left: -13px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #525252;
}

.menu-ul > li input[type=checkbox] ~ ul {
    display: none;
}
.menu-ul > li input[type=checkbox]:checked ~ ul {
    display: block;
}

.menu-ul > li input[type=checkbox] ~ label:after {
   content: "\f107";
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   text-decoration: inherit;
   transition: all .2s ease-in-out;
   display: inline-block;
   position: absolute;
   right: 12px;
   top: 4px;
   -webkit-transform: rotate(90deg);
   -moz-transform:    rotate(90deg);
   -o-transform:      rotate(90deg);
   -ms-transform:     rotate(90deg);
   transform:         rotate(90deg);
}
.menu-ul > li input[type=checkbox]:checked ~ label:after {
   -webkit-transform: rotate(0deg);
   -moz-transform:    rotate(0deg);
   -o-transform:      rotate(0deg);
   -ms-transform:     rotate(0deg);
   transform:         rotate(0deg);
}

<ul class="menu-ul">
	<li><a href="#!building_add">asd</a></li>
	<li><a href="#">asd</a></li>
	<li><a href="#">asd</a></li>

	<li>
		<input type="checkbox" id="a">
		<label for="a">sub</label>
	    <ul>
	 	    <li><a href="#">asd</a></li>
			<li><a href="#">asd</a></li>
			<li><a href="#">asd</a></li>
			<li>
				<input type="checkbox" id="b">
				<label for="b">sub</label>
				<ul>
			 	    <li><a href="#">asd</a></li>
					<li><a href="#">asd</a></li>
					<li><a href="#">asd</a></li>
				</ul>
			</li>
			<li>
				<input type="checkbox" id="c">
				<label for="c">sub</label>
				<ul>
			 	    <li><a href="#">asd</a></li>
					<li><a href="#">asd</a></li>
					<li><a href="#">asd</a></li>
				</ul>
			</li>
        </ul>
	</li>

	<li><a href="#">asd</a></li>
	<li><a href="#">asd</a></li>
</ul>

na potrzeby swojego projektu zrobilem takie menu w czystym CSS, musisz tylko usunac odwolanie do font awesome ew. zaimportowac do swojego projektu

Comments

a można jakoś dodać do tego menu efekt rozwijania jakiś i  żeby było zaznaczone obecne miejsce wybrana prze ze mnie ?

przyznam się że pierwszy raz takie menu tworzę i nie za bardzo to ogarniam.. :/ :(

---

trzeba by dodac visibility, ale ogolnie to się da, nie bedzie to takie samo jak gdyby zrobic w js ale zawsze to cos

---

hmm.. wiem że to nie js ale czy można jeszcze ustawić to tak żeby po wybraniu jednego działu / kategorii z meni poprzednie kategorie / działy się zwijały ?

---

oczywiscie, trzeba zmienic label dla inputu i rozciagnac go na caly <LI>