Drop down menü wordpress k2 -höz [update 1.3]

English support at K2 Forum!!!

Download for RC4, added categories

Download for K2 RC3

Download for K2 0.96 and above

Download for K2 0.95 RC1

Some comments:

Wayne Hatcher: Excellent! Thank you very much. God’s blessings to you
Blunted: Brilliant, your a star
abel68: This is just excellent! A wow-effect, easy to install, even for a newbie like me. Thanks a lot for your work.
Some sites that use my style:

Ashford Hockey Matches
ResearchTalk Podcasts
Persone e Valori per Mozzo
The Tank Studio
Art Directors Club of Houston

Submit your site in a comment!

How to implement to your site:

Make a menu.php paste into (the 3rd and 4th line just use in K2, otherwise delete it!! the 5th line list the categories, comment it out or delete it, if you dont want that):

<div id=”sidebar”>

<ul>

<?php if (’page’ != get_option(’show_on_front’)) { ?>

<li class=”<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(’is_tag’) and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a xhref=”<?php echo get_settings(’home’); ?>/” title=”<?php echo get_option(’k2blogornoblog’); ?>”><?php echo get_option(’k2blogornoblog’); ?></a></li>

<?php wp_list_categories(’orderby=ID&show_count=0&hide_empty=0&hierarchical=1′); ?>

<?php wp_list_pages(’sort_column=menu_order&depth=3&title_li=’); ?>

<?php wp_register(’<li class=”admintab”>’,'</li>’); ?>

</ul>

</div>

Edit header.php, paste before the </head> this:

<!–[if IE]>

<style type=”text/css” media=”screen, tv, projection”>

body { behavior: url(”<?php bloginfo(’template_directory’); ?>/code/csshover.htc”); }

</style>

<![endif]–>

Delete everything between <ul class=”menu”> and </ul>, and these two tags too

Insert before <hr/>: <?php include (TEMPLATEPATH . ‘/menu.php’); ?>

If you don’t use K2, must copy this line to header.php after </title> and before </head>:

<link href=”<?php bloginfo(’template_url’); ?>/dropdown.css” media=”screen” type=”text/css” rel=”stylesheet”/>

In this case copy dropdown.css to yours theme root, or change the route!!! Also you need the csshover.htc file in a code directory!!

dropdown menu for k2 wordpress

Nem sok olyan wordpress theme van amiben drop down menüvel jelenítik meg az oldalak tartalmát. Ezek közül is a Jillij az ami igazán elfogadható.

Ezt vettem alapul. Miután nem sok közöm van a php-hoz, csak megértem, hogy mi mi lenne, így az elején próbálkoztam ennek a css-ét teljesen beleszőni a k2 style sheet-jébe, de rondábbnál rondább eredmények születtek.

Ezek után ötlött fel bennem, hogy miért nem készítem el külön? Így a jillij css-éből magamévá tettem a hasznos részeket és a sidebar.php-ját (ami tulajdonképpen a menüje) átvariáltam a k2-höz.

Szóval létrehoztam egy menu.php file-t ami a következőt tartalmazza:

<div id=”sidebar”>

<ul>

<?php if (’page’ != get_option(’show_on_front’)) { ?>

<li class=”<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(’is_tag’) and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a xhref=”<?php echo get_settings(’home’); ?>/” title=”<?php echo get_option(’k2blogornoblog’); ?>”><?php echo get_option(’k2blogornoblog’); ?></a></li>

<?php wp_list_pages(’sort_column=menu_order&depth=3&title_li=’); ?>

<?php wp_register(’<li class=”admintab”>’,'</li>’); ?>

</ul>

</div>

Egy kis magyarázat azért erre még ráfér. Tehát az első része (igen az a szép, tömör gyönyör) a kezdőlap lenne (a k2 lekérdezi a beállításokat, hogy mit írjon ki, mivel a kezdőlap neve megadható). A második kilistázza az oldalakat, a parent (vagy szülő) oldalakat egymás mellé szépen és még leás 2 réteget. Szóval a szülő oldal aloldalának aloldaláig mutatja, asszem ennél nem is kell több. Az utolsó pedig az admin fület adja.

Ezek után jön a header.php módosítása, mivel az internet explorer -rel kompatibilissá kéne tenni, ha már nekifogtünk. Íme:

illeszük be a következő sorokat a <head> </head> elemek közé, ezzel az ie css értelmezési problémáit küszöböljük ki:

<!–[if IE]>

<style type=”text/css” media=”screen, tv, projection”>

body { behavior: url(”<?php bloginfo(’template_directory’); ?>/code/csshover.htc”); }

</style>

<![endif]–>

ez után a forrás végén a <div id=”header”> … </div> résznél a két div közül kiszedünk mindent, és a </div> után, a <hr /> előtt meghívjuk a menünket ezzel:

<?php include (TEMPLATEPATH . ‘/menu.php’); ?>

Már majdnem kész is vagyunk, csak a stíluslap és a csshover.htc hiányzik. A css file-t a k2 styles könyvtárába kell rakni, míg a másiknak létre kell hozni egy “code” nevű könyvtárat.

Ha mindezzel megvagyunk, akkor csak annyi a dolgunk, hogy a megjelenés / k2 beállítások lapon a scheme -ek (stílusok) közül kiválasztjuk a dropdown-t, frissítünk és voila!

A szükséges file-ok innen letölthetőek.

A css file-ban állíthatóak a színek az alja fele. Ott tudod az átlátszóságot is kivenni ha nem tetszik.

Természetesen ez a drop down megoldás nem csak k2 -höz alkalmazható, hanem bármilyen más theme -hez is, ha a menu.php -t és a header.php -t megfelelően módosítod.

Bármi kérdést, óhaj, sóhajt, észrevételt szívesen fogadok.

És ha használod akkor megköszönnék egy linket az oldaladon! ((=

Osszd meg és uralkodj:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • blogtercimlap
  • Book.mark.hu
  • Linkter
  • Propeller
  • MySpace
  • Live
  • Technorati
  • Reddit
  • TwitThis
  • Yahoo! Buzz
  • Print
  • email

71 Hozzászólás - “Drop down menü wordpress k2 -höz [update 1.3]”


  1. 1 TorokZoli

    amint latom csak nemzetkozi szinten sikerult elernem valamit a menuvel, itthon nem nagyon ertekelik |=

    bar ennek meg orulhetnek is (=

  2. 2 Kovács Ferenc

    Ciao!

    Engem érdekel, csak most vettem észre :)
    Egyébként nem sok magyar WordPress-es van. Egyszerűbb egy freeblog meg hasonlók.

    Kipróbálom én is ezt a menüt.

  3. 3 Kovács Ferenc

    Kiróbáltam és nagyszerűen működik! :) Köszi szépen!

  4. 4 TorokZoli

    hat azert vagyunk jo paran wp-sek
    ajanlom figyelmedve a http://word-press.hu -t

    es orulok hogy tetszett a menu ddd;

  5. 5 Jupe

    Köszi, este kipróbálom az és támámmal is.

  6. 6 Dragon Z.

    Őszinte gratulációm, nagyon ügyes kreáció! A K2 repository-jába is be kellene ajánlani szerintem!

  7. 7 TorokZoli

    koszi szepen, amint latom egyre tobben alkalmazzak, igy az oldalamra mutato linkek alapjan (=

    es ha be szeretned ajanlani, akkor nem tartalak vissza! hajra!

  8. 8 Dragon Z.

    Megtörtént, bevonultál a k2 történelembe :) Remélem, nem szerkesztik ki, bár jó lenne egy angol nyelvű guide is!!!

  9. 9 TorokZoli

    na majd osszelokok valamit (=

  10. 10 hat ez meg mi a budos

    LOFASZ?

  11. 11 TorokZoli

    attol hogy meg nem ertesz valamihez nem kell megnagyobb hulyenek latszodnod…

  12. 12 raja

    Thank You so muchhhhhhhhhh!!!!!

  13. 13 raja

    hey how can i make the menubar transparent…like in this site…personeevalori[]it

  14. 14 Török Zoli

    thats not transparent..
    it has a background image

    #sidebar {
    color: #FFFFFF;
    background: url(’bg_menu.jpg’);
    }

  15. 15 luc draven

    I’ve installed K2 0.9.6 but I don’t know how to use your drop down menu. Are there instructions?
    Thanks
    Luc

  16. 16 luc draven

    sorry I meant instructions in English to install your dropdown style. Thanks

  17. 17 Török Zoli

    copy the files inside the dropdown directory to k2’s dir, go to k2 options, select the dropdown style

    make some pages and subpages, thats it!

    more details at http://getk2.com/forum/showpost.php?p=13895&postcount=3

  18. 18 luc draven

    Cool. I shall try that. Thanks very much.

  19. 19 Luc

    Hi Torok, I got it working. Now I wonder how I can align the text menu more in the center of the black bar. At the moment it sits closer to the top. I’ve tried fixing the CSS but everthing goes funny when I do. Is there a trick?
    Thanks.
    Luc

  20. 20 Yvi

    What is with Wp. 2.3 ?

  21. 21 Stefano

    List also my site (http://www.stefanocislaghi.it/) that’s using your dropdown menu. You plan to make it compatible with K2 RC1 ?

  22. 22 Török Zoli

    in progress

  23. 23 Markus Lang

    Thank you for your wonderfull style!!

    We are using it on our site:
    http://freienetze.de

  24. 24 zoller

    Szia!
    Ez nagyon szuper, de van tipped nem k2 alá?
    Nekem ez a K2 dolog elég magasnak tűnik.

  25. 25 Török Zoli

    mukodik ez minden alatt, a leirtak alapjan barmelyik theme-be agyazhato

  26. 26 zoller

    Hát ehhez még tanulnom kell. Nekem már sima almenü is elég lenne, ahhoz gondolom elég a style.css-est és a headert átírni. Vagy kell valami más is?

  27. 27 zoller

    Kipróbáltam K2 alatt, nagyon jól működik. Aranyba kéne foglalni a kezed :)

  28. 28 anon

    hi

    ez a post életet mentet, de nem kicsit szégyenlem magam miatta…:)
    kb egy éve csücsül a gépemen egy másik ugyanilyen htc-s megoldás, amit azt hiszem a weblabor.hu-n találtam, és használtam is jó sokszor azóta. most, hogy wordpress-ben kellett egy estém ráment, mire eljutottam idáig… shame on me
    előtte órákig a table-os megoldással próbálkoztam, mire kiderült, hogy az csak xhtml 1.1 alatt működik (már akinek…)
    mégegyszer köszi

  29. 29 Olly S

    Any plans to add support for K2 RC 4? It doesn’t work with the RC3 version as far as i can tell…

  30. 30 Török Zoli

    it works with RC3, i tested and nobody noticed that its wrong

    added support to RC4 (please test it), added categories listing
    also wrote a little how to

  31. 31 Ben Kepes

    Cerebos Zoli!

    I am trying to customise my drop dwn menus so they look like the non-drop down ones on my blog (www.diversity.net.nz)

    I’m after yellow background with black text for currently selected page, black for hover with white text, green text and a white backgound for the rest

    any chance of you possibly helping me with my css – my skills aren’t the best

    many many thanks

    Ben

  32. 32 Lac

    Sziaszto!

    Amatőr vagyok. A menu.php-t más theme-hez hogyan kell módosítani???

    Előre is köszi

  33. 33 Török Zoli

    hat azt nem nagyon kell, de fentebb MINDEN le van irva….

  34. 34 Simon

    I see you have the default width set to 750px.
    I have three columns on my site, makig it 950px.
    You should set the width in your dropdown.css to 100% instead, that way it will fit any width. great app!

  35. 35 Rasa

    Hi,
    Thanks for the great style. I was wondering if there is any way to make the entire “block” of each menu item a link instead of just the text being the link?

    Thanks in advance,
    Rasa
    Wordpress 2.3.3
    K2 RC4
    Dropdown V1.2

  36. 36 dani

    hello

    én is csatlakozom a hálás rajongók táborához :) a MOME Könyvtár honlapja is a te mod-odat használja (http://konyvtar.mome.hu). egy apró kérdés/kérés: nem figyeltem, de csak most tűnt fel az 1.3as verzió. ezt mikor raktad ki (nem tudom, hogy akkor én most ezt használom-e)? a verziókhoz nem teszel release date-et? mert az sokat segítene…

    és egy apró kérdés, nem tudom, hogy ilyen jellegű supportot tolsz-e: az egyes oldalsávben lévő Text dobozokat meg lehet csinálni lenyílóra? azaz alapban csak a címet írja ki, balra mellette kis nyíl, amire kattintva lenyílik a doboz.

    köszönöm!

  37. 37 Török Zoli

    az 1.3-ast asszem januar vegeben loktem ki

    igazabol nem nagyon foglalkozok vele, mivel nem az en munkamamon alapul, kellett egy ilyesmi ezert osszeolloztam par dolgot gyorsan (nagyon gyorsan) es ez lett belole

    ezert a foltozgatason kivul nincs is mas tervem vele, nem ertek ilyen szinten a css-hez es nem is akarok

    lenyilora ezt szerintem nem lehetne megcsinalni vagy nem tudom, valami css tudor kell hozza ddd;

    amugy ha valaki veletlenul ezt tovabb fejlesztette es megosztana szivesen kirakom!

  38. 38 Aphex

    Hi, i’ve installed your amazing plugin in 2.3.3 and k2 rc4 and it wasn’t inserting the dropdown.css style in the header, untill i’ve manualy put in:
    ../css/rollingarchives.css.php” />

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”/styles/dropdown/dropdown.css” />

    after this insertion, plugin works normaly. Dunno why, i’m no css wizzard :)
    I’ve just wanted to point this out, maybe it’ll help someone 8)

    great work with the plugin, btw !

  39. 39 Aphex

    <link rel="stylesheet" type="text/css" media="screen" href="/styles/dropdown/dropdown.css" />

    ok, the parser raped the msg… there is a php function calling the default theme dir before /styles….

  40. 40 paperjam

    Hi

    I added a few additional styles so that the entire menu items are clickable (and not just the text):

    #sidebar li ul {
    width: auto;
    }

    #sidebar li {
    display: block;
    float: left;
    font-size: 1.0em;
    line-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    #sidebar li a {
    display: block;
    font-size: 1em;
    margin: 0;
    padding: 0.5em 5px;
    width: auto;
    }

    #sidebar li.categories {
    height: 25px;
    padding-top: 5px;
    cursor: pointer;
    }

  41. 41 Pavan Chander

    Thanks, the style works really well.

    Would be nice to have the whole block as a link, instead of just the text though.

  42. 42 psychoo

    Hali!
    Kösz a plugint!!!
    Ha kész az oldal belinkelem. ;)

  43. 43 emil

    the last update dont work with the laitest update of k2… well the latest update isnt realy offical form k2 jet but still I checked it out and the drop down menu dont work…… CRYSIS:… when can I expect a new releze

  44. 44 emil

    sorry that was for rc5

  45. 45 Kristian

    Thank you so much for this one!!! :D

    How do I exclude certain pages? Is it easily done?

  46. 46 Kristian

    wp_list_pages(’ exclude=326,303,296, 78,271,169,309& sort_column=menu_order& depth=3& title_li=’); in menu.php work fine. :)

  47. 47 Jason

    alternatively, you can create another DB table which store all the pages you would like to include?

  48. 48 Török Zoli

    new DB table? why? its not necessery…, just give the right arguments to the function

  49. 49 Thomas

    Dropdown is really great but somehow it broke the live search widget?
    Can this be true?

  50. 50 Thomas

    forget about my question above

  51. 51 Körmendi Péter

    Üdv!

    A http://www.autoipari-klaszter.hu oldalunk K2-őn fut, alkalmazva a fenti dropdown.css-t.
    Viszont van vele egy kis gondom:
    1. Firefox alatt alatt a menüpontok betűszíne fekete (ahogy kellene), IE alatt viszont kék.
    2. IE7 alatt legördül a menü, IE6 alatt viszont nem.

    Amúgy nem vagyok egy IE párti, viszont a felhasználók többsége még(!) azt használja, ráadásul a 6-ost.
    Kérdésem, hogy a fenti update-ek valamelyike megoldást kínál ezekre a problémákra?

    Köszönöm a választ.

    Körmendi Péter

  52. 52 Török Zoli

    http://getk2.com/forum/showthread.php?t=3490&page=3#83

    fenti linken a hozzaszolashoz van csatolva egy zip, az a legujabb, ajanlom hogy azt hasznalja

    a csshover.htc -nek lehet erdemesebb lenne abszolut elerest adni biztos ami biztos alapon (ez kell az ie-ben valo lenyilashoz)

    az hogy ie alatt a link szine kek az annyit tesz, hogy valahol a k2 css-ben at lett allitva es az felulirja a dropdown meghatarozasat

  53. 53 Körmendi Péter

    Köszönöm a választ.
    A link színét megoldottuk, a legördülő menü IE6 alatt még így sem működik.
    No, majd nézünk valami új Design-t úgyis, majd ez is egy szempont lesz.

    Üdv: Körmendi Péter
    http://www.autoipari-klaszter.hu

  54. 54 Joachim

    wow great stuff … thanks for sharing this!

    greetings
    Joachim

  55. 55 sanddlife

    I’ve implemented it here. Works great! Is there any way to make it non-tranparent?

  56. 56 Török Zoli

    edit dropdown.css at line 97
    delete this: opacity:0.95;

  57. 57 Adam us Hosting

    Many thanks for your fantastic styles, Any one see this post must adore your hard work, i give you 5 stars…

  58. 58 robin

    hey, thanx for your great work but in my case: I tried everything ut it doesn’t work. I cannot use your header.php … when I use it, all the content of my site does not appear. I am using k2 rc7 with wordpress 2.7 is that the problem?

    looking forward to hear from you!
    thanx, robin

  59. 59 Török Zoli

    just read the post above….

  60. 60 aadi

    We search everytime the most difficult way…and we find sometime big help :)
    Thank you very much!

    Just again another lazy question…can you put the menubar at the top of the page just with css? if yes how?

    Regards,

    Aadi

  61. 61 Cem

    I have the same problem as Robin. And couldn’t find “the above” post :)

    Best.

  62. 62 Cem

    Here is the solution :

    link rel=”stylesheet” type=”text/css” media=”screen” href=”http://www.domainname.com/wp/wp-content/themes/k2/style.css” /

    link rel=”stylesheet” type=”text/css” media=”screen” href=”http://www.domainname.com/wp/wp-content/themes/k2/styles/dropdown/dropdown.css” /

    Add 2nd line in header.php

    Also remove php k2_body_id();

  63. 63 Kh77eel

    Thank you so much

    I managed to do this on a blog of mine using

    K2 1.0-RC7

    What you need to do is copy OVER the header.php with this one – make sure you make a back up of the old one

    Your tag replace with this:

    <body class=”">

    Find

    Add this directly after

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”/dropdown.css” />

    That should do it. Otherwise drop me a link at x(at)k77eel(dot)com

  64. 64 phoot

    Hallo!

    ich versuche gerade das Dropdown-Menu einzufügen, allerdings ist mein englisch nicht das Beste.

    Für eine Anleitung auf deutsch wäre ich sehr dankbar.

    MfG
    phoot

  65. 65 Török Zoli

    Mein Deutsch ist sehr schwach zu.
    So mit “Google Translate”, genauso wie mir.

  66. 66 michal zobec

    hi, please, it is possible update your dropdown menu for last build of K2 theme?

    thanks for your respond
    michal

  67. 67 Török Zoli

    sorry not supporting the style anymore…

  1. 1 Menu a tendina at RLZ
  2. 2 Webdesign professional
    Trackback cím @ 2007. okt. 25. @ 10:53
  3. 3 Neues Design at FreieNetze
    Visszaping @ 2007. nov. 10. @ 15:47
  4. 4 Ajánlott olvasmány (2007.11.29) - élet és könyvtár
    Visszaping @ 2007. nov. 29. @ 19:23

Te mit gondolsz?