dropdown menu

kotek999

2011-07-29 16:52

poszezenie nieaktualne, jeszcze tylko prosba o wycentrowanie wzgledem tla

kotek999

kotek999

2011-08-01 15:06

http://www.getinbank.pl/dla-firmy/na-start.html
jak zrobic takie subpagelist - chodzi mi o obrazki przed tytulem podstrony


Pozdr i dz

kotek999

rzyber

2011-08-03 10:13

Nie wiem czy dobrze zrozumiałem ale,

w pliku templates/default.css

#menu2 .sub1 li {...}

dodaj #background:url ('img/nazwaobrazka.gif') no-repeat center 10px;

#menu2 .sub1 li {#background:url ('img/nazwaobrazka.gif') no-repeat center 10px;padding-left:30px;}

Oczywiście wielkość obrazka ma znaczenie przy ustawianiu padding-left

kotek999

2011-08-03 16:40

rzyber dz.

kotek999

kotek999

2011-08-23 12:42

rzyber jeszcze jedno pytanie, pod eksplorer menu rozwijane chowa sie pod animacje w head3, jak zrobic aby sie nie chowalo i bylo widoczne

Dz

kotek999

rzyber

2011-08-23 14:01

popróbuj z Z-INDEX powinno pomóc jeżeli animacja jest we flash dodaj
<param NAME="wmode" VALUE="transparent">

4sklep

2011-09-06 14:28

Bardzo fajny przykład.
Może ktoś doradzić w którym miejscu mogę zmienić 2 poziom menu żeby rozsuwało się po prawej stronie równolegle.

Podaje przykład, teraz mam takie menu:
http://bialouskuchnie.pl/menu.JPG

Z góry dzięki za pomoc.

qucik.cart

ErNi

2011-10-13 21:15

starałem się zmienić tak samo menu3 ale nie powiodło mi się czu mogę prosić o pomoc.

w mojej pages.php kodzik jest troszkie inny:
if( $iDepthLimit > $iDepth && ( $iPageCurrent == $iPage || isset( $this->aPageParents[$iPage] ) ) ){
#if( $iDepthLimit > $iDepth ){
$this->generateMenuData( $iType, $iPageCurrent, $iDepthLimit, $iDepth + 1, $iPage );
}

Proszę o pomoc dokładnie chodzi mi o Vertical Example

http://qrayg.com/experiment/cssmenus/

jankesmj

2011-10-20 14:45

Próbował ktoś przerobić aby menu (submenu) otwierały się w górę? potrzebuje to rozwiązanie do nowej strony - Menu ma wyglądać tak ja na obrazku pod adresem: http://www.basenykim.pl/index2.html
Gdzie szukać zmiany kodu?

www.jankes.noskow.info

Makaron

2011-10-20 15:39

To chyba nie będzie takie łatwe.. Jest jeden problem, że naturalnie elementy listy <ul> wyświetlane są jeden pod drugim, a nie znamy wysokości tego menu.. Ja nie mam pomysłu jak przerobić to menu.
Wprawdzie domyślnie w stylach CSS jest:

Czyli pierwsze submenu ląduje 24 piksele pod głównym elementem (top: 24px;), ale choćbyś zmienił to na top: -24px; to i tak tylko zacznie się całe menu wyżej,a później zląduje.
Chyba na tym przykładzie będzie ciężko. Spróbuj znaleźć inne rozwiązanie w sieci, które działa tak jak potrzebujesz i chyba łatwiej będzie go dostosować do Quick.Cart, niż zmieniać to wg Twoich zaleceń.

I helped? Like it: www.facebook.com/makwebpl

jankesmj

2011-10-21 00:17

racja, no nic... będę próbował... jak znajdę rozwiązanie z tym czy z innym menu to napisze...

www.jankes.noskow.info

jankesmj

2011-10-21 14:04

jest coś takiego:
http://www.cssplay.co.uk/menus/upmenu.html
http://forum.webhelp.pl/javascript/menu-rozwijane-w-gore-t176838.html - to coś się rozjeżdża w różnych przeglądarkach.

nie jestem biegły w php - czy ktoś ma pomysł jak to wdrożyć w QC? Pewnie przyda się potomnym ;)

www.jankes.noskow.info

MirasZelazny

2011-10-24 09:11

@Rzyber:
świetne i proste menu - dzięki
mam tylko drobne pytanie, starałem się to zrobić na różne sposoby i nie wychodzi:
jak ustawić w CSSie .selected {background-color:#...} dla wybranej pozycji z rozwiniętego menu?
pozdrawiam

ErNi

2011-10-24 13:38

[cytat]Nie wiem po co tyle kombinujecie... najprostsze drop down menu w 3 krokach

Krok1.
w pliku templates/default.css

pod linijką #menu2 li a:hover, #menu2 .selected{border:1px solid #e6e3e3;border-bottom:0px;background-color:#fff;color:inherit;text-decoration:underline;}

dodajemy

#menu2 li ul {display:none;}
#menu2 li:hover > ul {display: block;position:absolute;width:140px; margin-top:38px;z-index:200;list-style:none;background:#fff;border:1px solid #e6e3e3;border-top:0px;}
#menu2 .sub1 li {clear:left;padding:0px 10px 0px 10px;text-align:left; border-bottom:1px solid #ededed;width:120px;}
#menu2 .sub1 li a {padding:0px;font-size:0.833em;background:none;border:0px;padding:6px 8px;}
#menu2 .sub1 .lL {border:0px;}

Krok 2. w pliku templates/themes/default.php

linijkę $sMenu2 = $oPage->throwMenu( 'menu_2.tpl', 2, $iContent, 0 );

zamieniamy na $sMenu2 = $oPage->throwMenu( 'menu_2.tpl', 2, $iContent, 1 );

Krok 3. Logujemy się do panelu administracyjnego i w konfiguracji ustawiamy
Wyświetl rozwinięte menu TAK

Koniec...

Demo: http://www.proszablon.pl/qcms31a/ - należy najechać nasza oferta
[cytat/

czy można w tak prosty sposób zrobić menu3? i żeby się otwierało w prawo
http://qrayg.com/experiment/cssmenus

.kotek999.

2011-10-27 16:00

ErNi - wszystko ok, ale dostosowalam menu aby wyswietlalo sie do gory - jest ok ale pod ie chowa sie pod animacje, zabawa z-index nie pomogla, prosze o pomoc

.kotek999.

boboo

2011-10-27 16:45

zmień margin-top:38px na deczko mniej. Np. 36px
W tej chwili jest tam maleńka przerwa, która powoduje, że jadąc myszką w dół w kierunku submenu, wychodzisz w sumie z menu i ono znika.

strzelectwo.kimla.de

ErNi

2011-11-02 09:11

zmieniłem menu3 ale mam problem żeby ustawić rozwijanie na prawo http://qrayg.com/experiment/cssmenus czy może ktoś podpowiedzieć jak to zrobić

piospi

2011-11-21 12:05

Witam, również zmieniłem sobie menu3 na menu rozwijane, korzystając z tego rozwiązania (http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm).

Przykładowa struktura mojego menu to:

Wszystko działa ok, mianowicie menu składa się z trzech linków (dział1, 2, 3), a trzymając myszkę nad działem 2 rozwija się poddział 2.1.

Interesuje mnie jednak stworzenie następującego rozwiązania, iż będąc wewnątrz podstrony "poddział 2.1", chciałbym, żeby menu było już "otwarte" w całości. Jak się do tego zabrać?

cachousam

2011-12-21 08:22

Thanks first for your job
I have try your code and it is good for menu 2 under the logo like this:

http://imageshack.us/photo/my-images/526/screenpouropen.png/

but impossible to do the same thing with menu 3 or 4 for example.

Thanks for advance

maria.33

2012-02-17 11:47

WILEKIE DZIĘKI!!! ta modyfikacja działa super!!!

@tomek_k: Dobra robota.. Przetestowałem i działa poprawnie.. Pozwoliłem sobie poprawić nieco Twojego posta - źle zamknąłeś jeden fragment z kodem przez co post stawał się nieco nieczytelny..

@nonegiven: I try to translate solution which tomek_k gave us.. Here it is:

(dropdown menu will be displaying under logo - it will be modificated $sMenu2)
I deleted others menus but it doesn't matter in fact..
Solution was implemented on default version of Quick.Cms so installation should work without any problems..
1. Changes with files.

1.1 core/pages.php
lines:


if( $iDepthLimit > $iDepth && ( $iPageCurrent == $iPage || isset( $this->aPageParents[$iPage] ) ) ){
#if( $iDepthLimit > $iDepth ){
$this->generateMenuData( $iType, $iPageCurrent, $iDepthLimit, $iDepth + 1, $iPage );
}


change to line:


$this->generateMenuData( $iType, $iPageCurrent, $iDepthLimit, $iDepth + 1, $iPage );



It makes all subpages will be visible all the time..

1.2 templates/container.php

below line:


<style type="text/css">@import "$config[dir_templates]$config[template]";</style>


add this code:


<style type="text/css">@import "$config[dir_templates]nav-h.css";</style>

<!--[if gte IE 5.5]>
<script type="text/javascript" src="$config[dir_core]nav-h.js"></script>
<![endif]-->



2. Add files which You have to prepare
To templates/ folder You should add file nav-h.css which contains this code:


/* Root = Horizontal, Secondary = Vertical */
ul#menu2 {
margin: 0;
border: 0 none;
padding: 0;
width: 600px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#menu2 li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#menu2 ul {
margin: 0;
border: 0 none;
padding: 0;
width: 200px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#menu2 ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#menu2 ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#menu2 a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #000;
font: italic 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu2 a:hover,
ul#menu2 li:hover a,
ul#menu2 li.iehover a {
background: #CCC;
color: #000;
}

/* 2nd Menu */
ul#menu2 li:hover li a,
ul#menu2 li.iehover li a {
float: none;
background: #EEE;
color: #000;
}

/* 2nd Menu Hover Persistence */
ul#menu2 li:hover li a:hover,
ul#menu2 li:hover li:hover a,
ul#menu2 li.iehover li a:hover,
ul#menu2 li.iehover li.iehover a {
background: #CCC;
color: #000;
}

/* 3rd Menu */
ul#menu2 li:hover li:hover li a,
ul#menu2 li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#menu2 li:hover li:hover li a:hover,
ul#menu2 li:hover li:hover li:hover a,
ul#menu2 li.iehover li.iehover li a:hover,
ul#menu2 li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 4th Menu */
ul#menu2 li:hover li:hover li:hover li a,
ul#menu2 li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#menu2 li:hover li:hover li:hover li a:hover,
ul#menu2 li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#menu2 ul ul,
ul#menu2 ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu2 li:hover ul ul,
ul#menu2 li:hover ul ul ul,
ul#menu2 li.iehover ul ul,
ul#menu2 li.iehover ul ul ul {
display: none;
}

ul#menu2 li:hover ul,
ul#menu2 ul li:hover ul,
ul#menu2 ul ul li:hover ul,
ul#menu2 li.iehover ul,
ul#menu2 ul li.iehover ul,
ul#menu2 ul ul li.iehover ul {
display: block;
}


To core/ folder You have to add file nav-h.js which contains:


navHover = function() {
var lis = document.getElementById("menu2").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);



It's all. In this moment Your dropdown menu should works correctly. All changes connecting with displayng menu You should make in file nav-h.css. Menu works correctly with all main browsers.. It is horizontal menu if You want to make vertical menu You should also edit file nav-h.css..

Author:
tomek_k

--------------------------------------------------------------------------------------------

Mam tylko pytanie i prośbę, czy jest możliwość aby to samo DROPdownmenu zastosować dla menu nad bannerem?

Będę wdzięczna za podpowiedź

-------------------------------------------------
ErNi Twój sposób też wypróbowałam łatwy prosty, ale u mnie poprawnie działa tylko w mozilli w ie mam rozwijające się mneu przesunięte w prawą stronę , czyli jeśli jest np. wyraz "nowości" to jak on się kończy to wyjeżdża od spodu rozwijane menu u w tym miejscu się zaczyna, nie jest to tak jak w mozilli , ze jest dokladnie pod główną podstroną.

Próbowałam to zmienić, ale tak jak już nie mam problemu z układem strony, zmianą kolorystyki, grafiki czcionki itp, tak niestety z tym sobie nie poradziłam :(