Rozwijane menu tak jak w adminie

zak293

2007-07-07 09:51

Witam, jak zrobić na stronie rozwijane menu takie jak w adminie - po najechaniu na strony pokazuje się dodaj stronę.

» Quick.Cms v1.x

merci

2007-07-09 09:57

zak293 -
otworz plik templates/page.tpl i zaraz przed </head> wstaw:


<link rel="stylesheet" href="$config[dir_tpl]menu.css" type="text/css" />
<script type="text/javascript" src="$config[dir_js]adminGlobals.js"> </script>

nastepnie skopiuj plik templates/admin/menu.css do templates/
Teraz mozesz w pliku templates/page.tpl w menu, ktore ma dzialac jak to w administracji wstawiac linki w postaci (to jest tylko przyklad):


<div class="menuBar">
 <a class="menuButton" href="?p=productsList" onmouseover="return buttonClick(event,'products'); buttonMouseover(event,'products');">$lang[products]</a>
</div>

<div id="products" class="menu" onmouseover="menuMouseover( event );">
 <a class="menuItem" href="?p=productsForm&amp;iCategory=$iCategory"><span class="menuItemText">$lang[Add_product]</span></a>
</div>

Oczywiscie musisz sobie to wszystko dostosowac do wygladu Twojej strony oraz pozmieniac linki.

ola001

2008-01-14 09:53

A jak to zribić w wersji Quick.Cms.Lite_v2.0?
Nie znalazłam w templates pliku page.tpl - jest tylko pages_default.tpl i nie ma w nim <head></head>

treewood (OpenSolution)

2008-01-14 12:38

ola001 - nazwa zmienila sie z templates/page.tpl na templates/container.tpl

ola001

2008-01-16 13:20

Dziękuję za pomoc! Dokładnie o to mi chodziło. :)

gariz

2008-07-12 23:08

hello wykonalem czynnosci tak jak napisaliscie ale cos nadal mi nie dziala ;/

do pliku container.php wkleilem



<script type="text/javascript" src="$config[dir_core]common-admin.js"> </script>
<link rel="stylesheet" href="$config[dir_templates]menu.css" type="text/css" />

nie wiem czy dobre pliki wskazalem bo robilem to na oko :( opis powyzej niestety dotyczy starszej wersji - zmienilem na [dir_core] bo tam sa wlasnie pliki skryptow js

w miejscu gdzie powinny byc pozycje rozwijane menu wkleiłem



<div id="container">
  <div id="main">
    <div id="head1">
      $sMenu1
      <div class="menuBar">
 <a class="menuButton" href="?niskie,17" onmouseover="return buttonClick(event,'products'); buttonMouseover(event,'products');">$lang[products]</a>
</div>

<div id="products" class="menu" onmouseover="menuMouseover( event );">
 <a class="menuItem" href="?p=productsForm&amp;iCategory=$iCategory"><span class="menuItemText">$lang[Add_product]</span></a>
</div>
    </div>
    <div id="head2">

nie bardzo wiem gdzie i jak wklejac linki do podstron jak maja byc wybierane z rozwijanej listy (skad linki do postron wziasc - wchodzac na kazda osobno??) moze ktos moglby wrzucilc chociaz swoje menu z wieksza ilosci pozycji wtedy sie domysle co trzeba zmieniac, jesli moge prosic to wklejcie to tak jak ja - z otaczajacymi tagami przed i po liniac ktore trzeba wstawic

plik menu.css wykonalem z templates/admin/style.css - zmienilem nazwe i wkleiłem jako templates/menu.css

bede bardzo wdzieczny za kazde wskazowki!!!!!

Makaron

2008-07-14 08:53

Właściwie większość czynności, które trzeba tutaj wykonać stosuje się poprzez znaną chyba wszystkim metodę kopiuj/wklej :) Odniesienia w <head> zrobiłeś poprawnie. Do pliku templates/menu.css powinieneś wkleić taką deklarację:


/* top menu under logo styles */
#menuBar, .menu{color:#fff;font:bold 12px Arial;}
#menuBar a, .menu a{text-decoration:none;cursor:pointer;}
.menu a:hover{color:#000;text-decoration:underline;cursor:pointer;}
#menuBar{height:26px;margin:0;padding:0 10px;border-bottom:1px solid #cdb1b1;list-style:none;}
#menuBar li{float:left;margin:0 2px 0 0;padding:0;background:url( 'img/menu_bg.png' );}
* html #menuBar li{background:url( 'img/menu_bg.png' ) repeat-x 0 1px;}
#menuBar li a{display:block;float:left;background:url( 'img/menu_bg_2.png' ) no-repeat right;}
#menuBar li a span{display:block;float:left;height:24px;padding:2px 10px 0 30px;line-height:26px;}

.menu{position:absolute;visibility:hidden;top:0;left:0;z-index:101;margin:0;padding:0;border:1px solid #978888;background:#f6f3f3;list-style:none;}
.menu a{display:block;padding:3px 10px;color:#ca2222;text-decoration:none;}
.menu .sep{display:block;margin:4px 15px 2px;padding:0;border-top:1px solid #bbb;line-height:1px;font-size:1px;}

/* menu bar - icons */
#menuBar .pages{background:url( 'img/ico_pages.gif' ) no-repeat 5px 4px;}
#menuBar .lang{background:url( 'img/ico_lang.gif' ) no-repeat 6px 5px;}
#menuBar .files{background:url( 'img/ico_files.gif' ) no-repeat 8px 6px;}

Oczywiście to deklaracja dokładnie taka jak w panelu admina, naturalnym jest, że trzeba będzie ją później odpowiednio dostosować.

Zmienił się natomiast sam kod tego rozwijanego menu i można go znaleźć w pliku templates/admin/container.tpl i wygląda on następująco:


<ul id="menuBar">
        <li onmouseover="return buttonClick( event, 'p' ); buttonMouseover( event, 'p' );"><a href="?p=p-list"><span class="pages">$lang['Pages']</span></a></li>
        <li onmouseover="return buttonClick( event, 'languages' ); buttonMouseover( event, 'languages' );"><a href="?p=lang-list"><span class="lang">$lang['Languages']</span></a></li>
        <li onmouseover="return buttonClick( event, 'files' ); buttonMouseover( event, 'files' );"><a href="?p=files-list"><span class="files">$lang['Files']</span></a></li>
        <!-- menu under_logo bar end -->
      </ul>
            <!-- submenu under_logo start -->
      <div id="p" class="menu" onmouseover="menuMouseover( event );">
        <a href="?p=p-form">$lang['New_page']</a>
      </div>
      <div id="languages" class="menu" onmouseover="menuMouseover( event );">
        <a href="?p=lang-form">$lang['New_language']</a>
      </div>
      <!-- menu under_logo end -->

gariz

2008-07-14 11:32

hello ze wszystkim dalem rade mam juz tylko male pytanie ale mam z nim nie lada problem bo zdaje sie ze znowu czegos nie widze;] otoz wyswietlajace sie podlisty sa przesuniete na prawo i zanic nie moge ich wyrownac do lewej...
http://stronus.com/QuickCms/

Makaron

2008-07-15 08:23

Widzę, że już sobie poradziłeś z tym problemem.

PS: Ładna strona ;)

gariz

2008-07-15 12:07

no z tym sobie poradziłem ale chcialbym to zrobic porzadnie i chcialbym zeby menu bylo zrobione w TPL a nie poprostu statycznie wstawione w container.tpl tak by byla mozliwosc dodawania pozycji itd. - dacie rade pomoc?? czy to juz troche za duzo??

fajnie ze Ci sie podoba:)

gariz

2008-07-16 00:47

wiem ze to sporo roboty ale moze ktos juz to robil i moglby sie podzielic - nie tyle zalezy mi zeby to bylo w TPL ale zeby byla mozliwosc edycji menu dodawania/usuwania jego pozycji wlasnie za pomoca CMS bez grzebania w kodzie

:):)

dzieki

szlipek

2008-10-02 13:47

gariz mam do ciebie taką prośbę możesz napisać jak zrobiłeś to żeby podlista była pod menu bo też mam ten problem że podlista jest przesunięta w prawo

Makaron

2008-10-03 09:57

A czytaliście ten temat: http://opensolution.org/Quick.Cms/forum/?p=readTopic&nr=756 ?

met

2008-11-04 09:06

prośba jak takie menu zrobić w wersji Lite 2.x ?

to co zrobiłem to:

do pliku container.tpl wkleilem

<script type="text/javascript" src="$config[dir_core]common-admin.js"> </script>
<link rel="stylesheet" href="$config[dir_templates]menu.css" type="text/css" />

w miejscu gdzie powinny byc pozycje rozwijane menu wkleiłem tak jak gariz:

<div id="container">
<div id="main">
<div id="head1">
$sMenu1
<div class="menuBar">
<a class="menuButton" href="?niskie,17" onmouseover="return buttonClick(event,'products'); buttonMouseover(event,'products');">$lang[products]</a>
</div>

<div id="products" class="menu" onmouseover="menuMouseover( event );">
<a class="menuItem" href="?p=productsForm&iCategory=$iCategory"><span class="menuItemText">$lang[Add_product]</span></a>
</div>
</div>
<div id="head2">

podem skopiowałem plik style.css z admina to /templates/menu.css gdzie wstawiłem w odpowiednie miejsce:

/* top menu under logo styles */
#menuBar, .menu{color:#fff;font:bold 12px Arial;}
#menuBar a, .menu a{text-decoration:none;cursor:pointer;}
.menu a:hover{color:#000;text-decoration:underline;cursor:pointer;}
#menuBar{height:26px;margin:0;padding:0 10px;border-bottom:1px solid #cdb1b1;list-style:none;}
#menuBar li{float:left;margin:0 2px 0 0;padding:0;background:url( 'img/menu_bg.png' );}
* html #menuBar li{background:url( 'img/menu_bg.png' ) repeat-x 0 1px;}
#menuBar li a{display:block;float:left;background:url( 'img/menu_bg_2.png' ) no-repeat right;}
#menuBar li a span{display:block;float:left;height:24px;padding:2px 10px 0 30px;line-height:26px;}

.menu{position:absolute;visibility:hidden;top:0;left:0;z-index:101;margin:0;padding:0;border:1px solid #978888;background:#f6f3f3;list-style:none;}
.menu a{display:block;padding:3px 10px;color:#ca2222;text-decoration:none;}
.menu .sep{display:block;margin:4px 15px 2px;padding:0;border-top:1px solid #bbb;line-height:1px;font-size:1px;}

/* menu bar - icons */
#menuBar .pages{background:url( 'img/ico_pages.gif' ) no-repeat 5px 4px;}
#menuBar .lang{background:url( 'img/ico_lang.gif' ) no-repeat 6px 5px;}
#menuBar .files{background:url( 'img/ico_files.gif' ) no-repeat 8px 6px;}

(po wgraniu tego na strone wszystko sie rozjechało więć zostawiłem w menu.css tylko to co powyżej)

i potem w containerze jeszcze wstawiłem na samym dole:

<ul id="menuBar">
<li onmouseover="return buttonClick( event, 'p' ); buttonMouseover( event, 'p' );"><a href="?p=p-list"><span class="pages">$lang['Pages']</span></a></li>
<li onmouseover="return buttonClick( event, 'languages' ); buttonMouseover( event, 'languages' );"><a href="?p=lang-list"><span class="lang">$lang['Languages']</span></a></li>
<li onmouseover="return buttonClick( event, 'files' ); buttonMouseover( event, 'files' );"><a href="?p=files-list"><span class="files">$lang['Files']</span></a></li>

</ul>

<div id="p" class="menu" onmouseover="menuMouseover( event );">
<a href="?p=p-form">$lang['New_page']</a>
</div>
<div id="languages" class="menu" onmouseover="menuMouseover( event );">
<a href="?p=lang-form">$lang['New_language']</a>
</div>


niestety nic się nie rozwija:(

met

2008-11-04 10:26

przeanalzowałem kod i chyba bezmyślnie skopiowałem to co miał gariz dla swojego menu, chodzi mi o linijke w containerze.tpl:

<a class="menuButton" href="?niskie,17" onmouseover="return buttonClick(event,'products'); buttonMouseover(event,'products');">$lang[products]</a>
</div>

<div id="products" class="menu" onmouseover="menuMouseover( event );">
<a class="menuItem" href="?p=productsForm&iCategory=$iCategory"><span class="menuItemText">$lang[Add_product]</span></a>
</div>

rozumiem że "niskie,17" to była nazwa jakąstam w menu gariza, dajmy na to że chce aby rozwijała się zakładka oferta, u mnie po najechaniu na link oferta pokazuje się a "oferta,3" czyli to wstawie zamiast niskie,17 ale co dalej? co zamiast "products"?

prosze o pomoc bo sprawa pilna

met

2008-11-04 20:47

błagam o jakiś przykład do czystego Quick.Cms.Lite_v2.0, żeby chociaż jedną zakładke górnego menu dopasować... chodzi tylko o sam container.tpl co dokładnie do
<div id="container">
...
<div id="head2">

wsadzić dla np. oferty
please