dropdown menu - forum Quick.Cart i Quick.Cms

dropdown menu

tomek_k

2008-09-21 11:33

witam
zamierzam w zastosować na swojej stronie menu typu dropdown, chcę by było one umieszczone horyzontalnie pod logo, zastanawiam się tylko czy łatwiej byłoby mi wykorzystać 'menu pod logo' czy odpowiednio przekształcone menu 'kategoria' tak by po najechaniu na nazwę pokazywały się podmenu tego typu właśnie ala dropdown? czy ktoś z Was implementował może podobną funkcjonalność?
pzdr

» Quick.Cms v2.x

Makaron

2008-09-22 09:37

Przeróbek trzeba będzie dokonać i tu i tu.. Każdy typ menu ma ze sobą powiązane tzw podmenu (czyli podstrony konkretnej kategorii) z tym, że w niektórych te dane są zupełnie ukryte (menu 1 czy 2) w innych widnieją, ale posiadają np limity zagłębień (jak menu 3 i 4). Osobiście nie implementowałem takiego rozwiązania samodzielnie, ale myślę, że jest ono wykonalne, a wybór menu, które do tego celu chcesz użyć wydaje się mało istotne..

tomek_k

2008-09-22 17:00

wcześniej czytałem tego posta:
http://opensolution.org/Quick.Cms/forum/?p=readTopic&nr=719
jakie dokładnie zmiany zachodzą gdy zmienię kod na podany tam przez Ciebie?

tomek_k

2008-09-22 19:03

ok po wprowadzonym przez Ciebie kodzie i w oparciu o ten css
http://qrayg.com/learn/code/cssmenus/
osiągnąłem piękne drop down menu
pzdr

Makaron

2008-09-23 11:21

Jeśli byłaby możliwość podzielenia się z użytkownikami kodem lub kompletną solucją w jaki sposób tego dokonałeś to w ich imieniu chyba mogę o to poprosić.. Takie rozwiązanie może się przydać niejednemu użytkownikowi..

tomek_k

2008-09-24 19:45

Krótki opis jak zrobić dropdown menu w Quick.Cms v.2.x

(menu typu dropdown będzie umieszczone pod logo, będzie to zmodyfikowane $sMenu2) t
tak ja potrzebowałem by to wyglądało jednocześnie usunąłem pozostałe typy menu.
Poniższy opis był stosowany podczas pisania tego postu na 'świeżej wersji' cms, więc implementacja tego powinna przebiec bez problemów.

1. Zmiany w poszczególnych plikach.

1.1 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 );

dzięki czemu wszystkie pod menu widoczne są w menu.

1.2 templates/container.php

pod linijkę:



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

dodajemy:



<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. Dodanie potrzebnych plików
do folderu templates/
dodajemy plik nav-h.css
o zawartości:



/* 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;
}

oraz do folderu core/ dodajemy pliczek nav-h.js o zawartości:



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

w tym momencie odświeżamy naszą stronę i mamy piękne dropdown menu, którego wygląd zmieniamy poprzez edycję pliku nav-h.css, menu jest poprawnie wyświetlane pod wszystkimi liczącymi się przeglądarkami. Menu to jest wyświetlane horyzontalnie przeróbkę do vertical pozostawiam potrzebującym w ramach nauki własnej, czyli edycji pliku nav-h.css ;)

pozdrawiam
tomek_k

nonegiven

2008-09-24 22:18

Hi Guys
My sincere apology for not understanding Polish language, but I just feel this is an interesting thread. Can somone kindly translate for me please.
Thanks

Makaron

2008-09-25 10:31

@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

tomek_k

2008-09-25 15:58

@Makaron:
zauważyłem to dopiero po napisaniu posta, dzięki za korektę!
Ku chwale ojczyzny!

nonegiven

2008-09-28 21:51

Thank you for the guidance Makaron.
It works great fo me!

kalanta

2008-11-06 08:20

tomek_k, could you help? http://opensolution.org/Quick.Cart/forum/?p=readTopic&nr=5586

met

2008-11-06 13:57

niestety to menu pod IE7 wygląda fatalnie, u mnie nie chowają się kategorie i zostaje zmieniony kolor, wszystko się na siebie nakłada, pod operą i pod mozilla jest ok, wie ktoś jak naprawić to dla IE? nadal jest to głównie używana przeglądarka

met

2008-11-06 14:34

jak wywale plik "nav-h.js" z core to dziala ok ? może być bez tego pliku?

met

2008-11-08 10:40

czy można z dropdown menu drobić tak, żeby po najechaniu na zakładke która się rozwija, można było kliknąć tylko w te podstrony rozwinięte - chodzi o to że jak się kliknie w nadrzędną to strona się przeładuje i żeby jakoś usunąć albo ukryć link)

nie wiem czy to zrozumiałe staram się podać na przykładzie, najeżzdrzam na zakładke "o firmie", zakładka się rozwija na 3 podstrony, chodzi o to żeby była możliwość kliknięcia tylko tych 3 podstron rozwiniętych, a "o firmie" ma być "martwa", nie reagować na kliknięcia.

gwmbox

2009-03-11 07:28

First can I say thanks to you guys for making this available in english :).

I am having one issue though and that is when I hover over the parent menu item the submenu is shown but when I go to hover over the submenu it disappears.

I have tried it three times and the same result.

This is on FF3 and using QuickCMS 2.3 (i.e. not the Lite version)

Any ideas?

Thanks

gwmbox

2009-03-11 07:58

Fixed - added

z-index:100;

to

ul#menu2 ul

Cheers

gwmbox

2009-03-16 01:37

Has anyone got the above to work for sub sub menu items, i.e.

Parent
- child
- - child of child <--- this one?

Cheers

redrider

2009-05-11 06:59

I also am looking to use sub-sub-menus.
like---
Plants
flower
variety

At present needing to 3rd level only but maybe 4 soon
To see where I'm at, check http://www.polsonplants.co.nz
Any help appreciated, otherwise it's look for another CMS. Sob...

Redrider

imees

2009-06-08 23:11

Świetne rozwiązanie i mi również o takie coś chodziło jednak niestety pod IE szwankuje :( Cały czas wyświetla się rozwijane menu, a więc nie chowa się po zejściu kursorem z pozycji w menu. Czy ktoś może wie jak poprawić nav-h.css lub nav-h.js pod IE aby uniknąć tego? Byłabym BARDZO wdzięczna za odpowiedź!!

kalanta

2009-06-15 21:52


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