dropdown menu

michielm

Avatar: michielm

2009-06-19 04:27

Hello,

First i need to thank tomek_k and Makaron for the translation very much!

But i have noticed that on IE8 the menu is nog getting away... so i don't see the exact problem here... anyone found a solution for that yet...?

Thanks,
Michiel

michielm

Avatar: michielm

2009-06-19 04:28

Hello,

Excuses... my polish is bad, i read the last message and i found it now working!

Thanks everyone!

imees

Avatar: imees

2009-09-01 01:03

Dla tych, którzy mają problemy z wyświetlaniem tego menu w IE (po zejściu z menu wysuwane menu pozostawało, style rollover również) - wystarczyło zmienić mały szczegół w pliku nav-h.js
w linijce gdzie jest:
this.className=this.className.replace(new RegExp(" iehover\b"), "");

trzeba usunąć \b a więc cała zawartość tego pliku powinna wyglądać następująco:

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(" iehover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

To wszystko :) Teraz już wszystkim powinno śmigać pod IE :)
Pozdrawiam!

imees

Avatar: imees

2009-09-01 01:08

In english:
Solution for shoving thos menu in IE:
The correct content of nav-h.js shoul be:

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(" iehover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

This should help :)

KOSIASZ

No avatar

2009-09-09 11:44

a jak zrobić rozsuwane menu z lewej strony

ola001

Avatar: ola001

2009-09-09 13:17

A co zmienić i gdzie, żeby kolejne menu były też poziome. Próbuję w pliku nav-h.css ale nie ma efektu. Może ktoś z Was wiem jak to zrobić?

link1 link2 link3

podmenu1 podmneu2

KOSIASZ

No avatar

2009-09-10 09:36

Jeżeli ktoś chce menu rozsuwane po lewej stronie to chciałbym podzielić się moim sposobem ,na wstępie powiem że mogą być błędy więc poprawki mile widziane.
Postanowiłem stworzyć nową kolumnę wchodzę do pliku config/lang.php
i pod wierszem

$aMenuTypes[4] = 'Producenci';

dodać

$aMenuTypes[7] = 'Rozwijane Menu';

następnie w pliku templates\thrmes\default.php pod wierszem

$sMenu4 = $oPage->throwMenu( 'menu_4.tpl', 4, $iContent, 1 );

dodać

$sMenu7 = $oPage->throwMenu( 'menu_7.tpl', 7, $iContent, 1 );

Następnie tworzymy plik w templates o nazwie menu_7.tpl i wklejamy do niego

<!-- BEGIN LIST --><li class="l$aData[sStyle]"><a href="$aData[sLinkName]" $aData[sSelected]>$aData[sName]</a>$aData[sSubContent]</li><!-- END LIST -->

<!-- BEGIN HEAD --><div id="menu7"><div class="type">$aData[sMenuType]</div><ul id="menu7"><!-- END HEAD -->
<!-- BEGIN FOOT --></ul></div><!-- END FOOT -->

<!-- BEGIN HEAD_SUB --><ul class="sub$aData[iDepth]"><!-- END HEAD_SUB -->
<!-- BEGIN FOOT_SUB --></ul><!-- END FOOT_SUB -->

<!-- BEGIN SELECTED -->class="selected"<!-- END SELECTED -->


Po tym tworzymy pliki w templates jeden o nazwie nav-ha.css i wklejamy zawartość

/* Root = Horizontal, Secondary = Vertical */

ul#menu7 {
margin:4px 0;
list-style:none;
display:block;
padding:0px;
text-decoration:none;
width: 175px;
border-bottom:1px dashed #bcbaac;

}

ul#menu7 li {
margin: 0;

padding: 0px;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;

width: 175px;


}

ul#menu7 ul {
margin: 0;
border: 0 none;
padding: 0;

list-style: none;
display: none;
position: absolute;
width: 175px;
left: 0;
height: 34px;

}

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


}
ul#menu7 ul {
margin: 0;
border: 0 none;
padding: 0;
width: 175px;
list-style: none;
display: none;
position: absolute;
top: 34px;
left: 0;
}

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

/* Root Menu */
ul#menu7 a {
border-bottom:1px dashed #bcbaac;
display:block;
float:left;
width:96%;
padding:0 2%;



line-height:34px;
text-decoration:none;
height: auto !important;
height: 1%; /*For IE*/
}





/* Root Menu Hover Persistence */
ul#menu7 a:hover,
ul#menu7 li:hover a,
ul#menu7 li.iehover a {
background:url('img/nav.gif') left bottom;
color:#970000;text-decoration:underline;
}

/* 2nd Menu */
ul#menu7 li:hover li a,
ul#menu7 li.iehover li a {
float: none;
background:background:url('img/nav.gif') left bottom;
color: #000;
}

/* 2nd Menu Hover Persistence */
ul#menu7 li:hover li a:hover,
ul#menu7 li:hover li:hover a,
ul#menu7 li.iehover li a:hover,
ul#menu7 li.iehover li.iehover a {
background: #CCC;
color:#970000;text-decoration:underline;
}

/* 3rd Menu */
ul#menu7 li:hover li:hover li a,
ul#menu7 li.iehover li.iehover li a {
background:url('img/nav.gif') left bottom;
color: #000;
}

/* 3rd Menu Hover Persistence */
ul#menu7 li:hover li:hover li a:hover,
ul#menu7 li:hover li:hover li:hover a,
ul#menu7 li.iehover li.iehover li a:hover,
ul#menu7 li.iehover li.iehover li.iehover a {
background: #CCC;
color:#970000;text-decoration:underline;
}

/* 4th Menu */
ul#menu7 li:hover li:hover li:hover li a,
ul#menu7 li.iehover li.iehover li.iehover li a {
background:url('img/nav.gif') left bottom;
color: #000;
}

/* 4th Menu Hover */
ul#menu7 li:hover li:hover li:hover li a:hover,
ul#menu7 li:hover li:hover li:hover li:hover a,
ul#menu7 li.iehover li.iehover li.iehover li a:hover
ul#menu7 li.iehover li.iehover li.iehover li.iehover a {
background: #CCC;
color:#970000;text-decoration:underline;
}
/* 5rd Menu */
ul#menu7 li:hover li:hover li:hover li:hover li a,
ul#menu7 li.iehover li.iehover li.iehover li.iehover li a {
background:url('img/nav.gif') left bottom;
color: #000;
}

/* 5rd Menu Hover Persistence */

ul#menu7 li:hover li:hover li:hover li:hover li a:hover,

ul#menu7 li.iehover li.iehover li.iehover li.iehover li a:hover
{
background: #CCC;
color:#970000;text-decoration:underline;
}



ul#menu7 ul,
ul#menu7 ul ul,
ul#menu7 ul ul ul,
ul#menu7 ul ul ul ul {
display: none;
position: absolute;
top: 0;
left: 175px
}

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

ul#menu7 li:hover ul,
ul#menu7 ul li:hover ul,
ul#menu7 ul ul li:hover ul,
ul#menu7 ul ul ul li:hover ul,

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

i 2 plik o nazwie nav-ha.js i wklejić zawartość

navHover = function() {
var lis = document.getElementById("menu7").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(" iehover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
;

po tym należy wejść do pliku \templates\container.tpl i w nim pod linijką

<style type="text/css">@import "$config[dir_templates]$config[template]";</style>
dodać
<style type="text/css">@import "$config[dir_templates]nav-ha.css";</style>
<script type="text/javascript" src="$config[dir_core]nav-ha.js"></script>
jaki pod liniką

$sMenu4

dodać

$sMenu7

następnie w pliku \templates\ default.css pod liniką

#menu3 .selected, #menu4 .selected{background-color:inherit;color:#a7080c;text-decoration:underline;}
dodać
#menu7{padding:0 20px;}

pamiętaj jak niechcesz mieć rozsuwane menu pod logo



core/pages.php

linijkę

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

zamieniamy linijką:

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

imees

Avatar: imees

2009-09-11 01:16

Do: ola001
Na pewno w stylach to będzie, najprawdopodobniej w sposobie listowania (list-style), mi to wyszło przypadkiem gdy poprawiałam styl menu :)

ola001

Avatar: ola001

2009-09-15 20:01

Do: imees
A możesz ten kod po poprawianiu w którym Ci to wyszło przypadkiem wrzucić tutaj na forum?

ola001

Avatar: ola001

2009-09-18 10:01

Pomóżcie!!!! Próbuję i próbuję modyfikować nav-h.css i nie wychodzi... :(

Chcę, żeby podmenu pojawiało się po najechaniu na pozycję menu też w poziomie a nie w pionie. Robię próby tutaj: http://www.aleale.webd.pl/

Makaron

Avatar: Makaron

2009-09-18 14:38

Chyba Ci się udało osiągnąć cel. Gratuluję. ;)

ola001

Avatar: ola001

2009-09-18 14:49

Tak - dzięki pomocy kolegi po fachu na innym forum. :)
Żeby to uzyskać wykasowałam WIDTH z tego fragmentu kodu:


ul
#menu1 ul li {
display:block !important;
float:left;
}



Może się komuś przyda kiedyś. :)

marekj

No avatar

2009-11-03 15:38

witam wszystkich, udalo mi sie dodac drop menu. Nie wiem co zrobic aby menu z kategoriami, znow bylo zamknięte, tzn, zeby nie bylo widac podmenu.

z gory dziekuje za odpowiedz

simon1066

Avatar: simon1066

2009-11-12 14:20

Many thanks for this great code.

Could anyone tell me how to remove the dropdown from just one page in the menu? For example a news page as I don't want to list hundreds of articles in the menu.

Also can I fix the menu so it just shows one sub level in the dropdown?

Many thanks if anyone can help!

Simon

blume

No avatar

2010-03-08 09:21

Hi simon1066,

the solution to my problem might help you as well.

1. dropdown only for certain pages from the menu
this solution also helps collapsing the menu on the left again since the change of the file core/pages.php from...

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

to

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

leaves the menu on the left expanded. So forget about that and add after...

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

...this...

if( $iPage == XXX ){
$this->generateMenuData( $iType, $iPageCurrent, $iDepthLimit, $iDepth + 1, $iPage );
}

...where XXX is the id of the page in the horizontal nav-menu you want to have a dropdown with.

2. displaying only a certain sub level in the dropdown menu:

here you can use the variable $iDepthLimit from the code snippet above and set it to the number of the last sub level you want to include.

Some tweaks e.g. for adding several page from the horizontal menu still have to be made.

ketrab_eu

Avatar: ketrab_eu

2010-04-14 11:47

witam,

czy mozna zrobic tak aby wyswietlalo sie tylk 1 submenu mimo ze podmenu jest wiecej?

http://www.ketrab.eu/client/elzas/

Pozdrawiam

Makaron

Avatar: Makaron

2010-04-14 13:50

Tak. Nie rób pierwszej zmiany w pliku core/pages.php w panelu admina w konfiguracji ustaw, że menu ma być rozwinięte na stałe i w pliku templates/themes/default.php ustaw limit odpowiedniemu menu na 1 (ostatnia zmienna w przypadku menu1 i menu2 domyślnie 0).

Mak-Web.pl - Modyfikacje skryptów Q.Cart i Q.Cms

ketrab_eu

Avatar: ketrab_eu

2010-04-14 14:22

Dzieki

działa prawie jak trzeba... tylko ze menu rozwija sie dopiero jak sie wejdzie do danej strony

jakis pomysl na to?

Makaron

Avatar: Makaron

2010-04-14 15:40

Nie.. Jeśli menu ma być rozwinięte na stałe - opcja w konfiguracji. To będzie rozwinięte na stałe, niezależnie na jakiej stronie się znajdujesz.

Mak-Web.pl - Modyfikacje skryptów Q.Cart i Q.Cms

ketrab_eu

Avatar: ketrab_eu

2010-04-14 17:09

Rozumiem ze to jest ta opcja w CP?:

Wyświetl rozwinięte menu

Do góry
o nas | kontakt