[CSS] Tweaki Menu

[lestatt 0]

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:

 

 

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 Marzec 26, 2013 przez lestatt (zobacz historię edycji)

[szopen 0]

podaj link do strony, bo screen to trochę mało

[lestatt 0]

Strona nie jest online, więc nie mogę tego zrobić, a online nie będzie, póki tego nie zrobię.

[regdos 1848]

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.

[lestatt 0]

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>

 

[szopen 0]

mamy HTML, to podeślij jeszcze ten CSS

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

[lestatt 0]

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 Marzec 29, 2013 przez lestatt (zobacz historię edycji)

[szopen 0]

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;

}

[lestatt 0]

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.

[szopen 0]

ż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ą.

[lestatt 0]

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