Skocz do zawartości
Zaloguj się, aby obserwować  
lestatt

[CSS] Tweaki Menu

Polecane posty

Witajcie.

Mam menu zrobione w CSS, wielopoziomowe. Problem polega na tym, że nie potrafię zrobić kilku rzeczy i tu zwracam się do was o pomoc.

 

Aktualnie wygląda to tak:

 

menu.jpg

 

a próbuję zrobić następujące rzeczy:

- podświetlenie każdego poprzedniego elementu (czyli: jeżeli na obrazie powyżej mamy podświetlone Kosiarki dyskowe, to Maszyny zielonkowe, Kuhn i Maszyny rolnicze również powinny być jednocześnie podświetlone)

- aby menu pozostało otwarte do momentu kliknięcia myszą na stronie lub wybrania innego elementu z menu, gdyż najmniejsze zboczenie kursorem z obszaru menu zamyka cąłośc, co jest bardzo denerwujące i utrudnia użytkowanie.

 

Byłbym wdzieczny za pomoc.

Edytowano przez lestatt (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Ale My nie wywróżymy jak to masz zbudowane ul/li czy divy, itp. czy oprócz css masz jakiś javascript, czy jest czysty javascript czy np. jquery, zresztą, wydaje mi się, że umiejętne wykorzystanie jquery załatwi Twoje problemy.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Mogę wrzucić fragment CSS odpowiedzialny za menusy, jeśli to w czymś pomoże. Sama struktura, to standardowe UL/LI, które generuje Wordpress przy tworzeniu włąsnych menu.

 

Przykład:

 

<ul id="main-nav" class="main-nav"><li class="home"><a href="http://localhost/">Home</a></li><li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item"><a href="http://localhost/">Strona Główna</a>
<ul class="sub-menu">
	<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/przykladowa-strona/o-firmie/"><span style="margin-left:12px;"> </span>O Firmie</a></li>
</ul>
</li>
<li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Oferta</a>
<ul class="sub-menu">
	<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span style="margin-left:12px;"> </span>Kombajny</a></li>
	<li id="menu-item-254" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span style="margin-left:12px;"> </span>Sieczkarnie</a>
	<ul class="sub-menu">
		<li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><img src="/wp-content/themes/gasperowicz/images/loga/krone-mini.png" width="38" height="40" style="; padding-right:5px;" />Krone</a></li>
		<li id="menu-item-463" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><img src="/wp-content/themes/gasperowicz/images/loga/kuhn-mini.png" width="38" height="40" style="; padding-right:5px;" />Kuhn</a></li>
	</ul>
</li>
	<li id="menu-item-255" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span style="margin-left:12px;"> </span>Ciągniki rolnicze</a>
	<ul class="sub-menu">
		<li id="menu-item-256" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><img src="/wp-content/themes/gasperowicz/images/loga/same-mini.png" width="38" height="40" style="; padding-right:5px;" />Same</a>
		<ul class="sub-menu">
			<li id="menu-item-257" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/solaris/"><span style="margin-left:12px;"> </span>Solaris</a></li>
			<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/dorado/"><span style="margin-left:12px;"> </span>Dorado</a></li>
			<li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/explorer/"><span style="margin-left:12px;"> </span>Explorer</a></li>
			<li id="menu-item-260" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/silver/"><span style="margin-left:12px;"> </span>Silver</a></li>
			<li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/laser/"><span style="margin-left:12px;"> </span>Laser</a></li>
			<li id="menu-item-262" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/iron/"><span style="margin-left:12px;"> </span>Iron</a></li>
			<li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/oferta/ciagniki-rolnicze/same/frutteto/"><span style="margin-left:12px;"> </span>Frutteto</a></li>
		</ul>
</li>
	</ul>
</li>

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

mamy HTML, to podeślij jeszcze ten CSS

zapytam profilaktycznie: dodatkowo jakieś JS'y pomagają Ci w wyświetlaniu tego menu?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Nie, menu, to czysty CSS, a włąśnie chyba jQuery trzeba będzie zaprzęgnąć. Ja niestety tego nie ogarniam i dlatego prosze o pomoc. W załączniku wysyłam plik z blokiem kodu odpowiedzialnym za menu. Sam wyczerpałem już całą wiedzę, którą mam i nadal nie udało mi się tego zrobić.

 

style.css

Edytowano przez lestatt (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Informacyjnie: menu bez javascritów nie rozwinie się pod IE (no moze w IE10 się pojawi).

 

rozwiązanie problemu:

 

ten fragment:

/* sub-levels link :hover */
#main-nav ul a:hover, #main-nav .current_page_item ul a:hover, #main-nav ul .current_page_item a:hover, #main-nav .current-menu-item ul a:hover, #main-nav ul .current-menu-item a:hover {
background: #F3F3F3;
color: #000;
color: black;
}

 

zmień na:

 

/* sub-levels link :hover */
#main-nav ul li:hover, #main-nav .current_page_item ul li:hover, #main-nav ul .current_page_item li:hover, #main-nav .current-menu-item ul li:hover, #main-nav ul .current-menu-item li:hover {
background: #F3F3F3;
}

#main-nav ul a:hover {

color: #000;
color: black;

}

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

szopen, wielkie dzięki za pomoc, ale dosłownie przed 15 minutami poradziłem sobie z problemem stosując

#main-nav ul li:hover > a

Kompletni zapomniałem, że przecież tak można (:

 

Pozostaje teraz tylko kwestia problemu drugiego.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

żeby menu pozostało wyświetlone do momentu kliknięcia w inne miejsce strony będzie już potrzebny js.

Raczej się takich rzeczy nie stosuje. Może to być nie intuicyjne i denerwujace że nie znika menu jesli klient odjedzie na bok myszką.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Ale z kolei, jak znikają wszystkie 4-5 poziomów menu, bo wyjedzie się kursorem piksel za menu, to też jest denerwujące...

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się

Zaloguj się, aby obserwować  

×