Hello, seems i got little problem. Since i have over 30 categories on my site i want to use collapsible menu for them to make navigation easier. I'll do it in a manner as descrided on Wiki (http://wiki.wordpress.org/Tabbed%20Sidebar). But in that example user has to add menu items manually. Is there a way to get conetnt for menus using WordPress internal functions?
Collapsible category list? (28 posts)
-
Loiso
Posted 5 years ago # -
This will do it to:
<li id="categories"><?php _e('Categories:'); ?>
<form action="<?php echo $PHP_SELF ?>" method="get">
<?php dropdown_cats(); ?>
<input type="submit" name="submit" value="view" />
</form> -
Posted 5 years ago #Thanks! That's makes the look much more compact. Is there some function to implement tree-like structure? So when the user clicks on parent category links to sub-categories will appear without reoading whole page.
Btw, what dropdown_cats() function returns? -
There are some resources out there that can produce a tree-like structure (sort of, but more like flyout menus...), but they'll take a bit of modification of your code.
Here's a good one that's xhtml compliant, accessible (508 compliant), and uses unordered lists to accomplish the feat. The problem is that you'll need to modify your list to include the proper id and class values (as explained on their website). I haven't tried it myself, but it shouldn't be too difficult to get working.
Note: don't worry about the "Purchase" link on the site. When you go to that page, you'll notice that it's free for personal non-commercial use as long as you include a link-back. -
did anyone checked my link?
-
http://test.techwhack.com/
the code from the earlier link is somewhat implemented on this test page. -
Sushubh - while that code may work, it would be royal pain to integrate into a WP site.
Depending on the particular style desired, it shouldn't take much to create a plugin that could do the job.
hmmm.... must think about this.... see potential in other areas, such as an archives.....
TG -
pain? i just added a class to the UL tag and inserted a js file in the header. no hacking required. the code takes care of the lists to unlimited depth! thats the beauty of the code from a guy known as TarquinWJ from Opera Forums and accessible at the link in this thread...
-
Posted 5 years ago #Sushubh, thanks a lot! This script was exactly what i wanted :) First, i didn't readed your link carefully enough and got how code works wrong... well, in fact i'm still not getting it fully :P... but it does what i want and it took just a couple minutes to set it up. Thanks again :)
-
actually the link i posted was of a sister code of the code it now shows :D
i fixed the link a bit later :p -
justkristin
Posted 5 years ago #I really want to use your script, Sushubh, but, remedial as I am, I cannot figure out what to do outide of inserting the javascript...and am even a bit confused as to whether I need to use the larger one (that is accessed via link, and begins with:
var openLists = [];
function compactMenu(oID,oAutoCol,oPlMn)
at all or not...
Sorry to be so dense, but can you explain a bit further? -
Anonymous
Posted 5 years ago #Great link Sushubh, I implemented the JavaScript into my wp-common.js file and made about 5 minutes worth of changes to my menu. Now all of the unordered lists collapse. Very nice.
-
Posted 5 years ago #justkristin, you need to do 2 steps (as i remember what i did yesterday):
1. Copy, paste and save into listCollapse.js file the script listed at the end of
http://www.howtocreate.co.uk/jslibs/htmlhigh/listCollapse.html Then uploas .js file to you wp root folder.
2. Put in your template after <body> tag following script:
<script type="text/javascript" language="javascript1.2" src="listCollapse.js"></script>
<script type="text/javascript" language="javascript1.2"><!--
window.onload = function () {
compactMenu('someID',true,'± ');
}
//--></script>
Note:
- you will need to replace someID tag with the correct css ID (in case of categories it should be "categories" by deflaut... i think).
- setting second parameter in compactMenu() to true makes sub-items of menu to appear collapsed by defalult. You can set this to false if you want them to be shown on page load. -
Not quite what I am looking for, as I would prefer a non javascript solution.
However the only way I can see it happening is if each category had a #id relevant to their ID.
This can then be mirrored in a bit of style code in the header that sets the sub-category to display. In the main css all sub-categories would be set to display none. -
whats wrong with javascript?
this is a code that degrades nicely in js disabled browsers... it uses dom as the author told me...
javascript is not bad as long as it is used properly. -
A lot of the people I know actively dislike javscript. They don't have it enabled in their browsers for this reason.
Plus when a solution can be done in css, it is far more cross browser compatible IMO. Well that and i like css, and can code with it to get desired results :-) Something which i can't do at all in javascript.
I am slowly getting an idea of how to achieve what I want, but need to get things straight in my head first. -
elfin wrote:
This can then be mirrored in a bit of style code in the header that sets the sub-category to display. In the main css all sub-categories would be set to display none.
So, how would you change it to visible once the parent cat was clicked? The only way I know of is to use javascript to change the style allowing it to become visible. If there's a "better" way, I'd like to hear/see it.
TG -
I'm working on it! but I don't know php so it's going to take a while :-)
heres my thoughts, hopefully some of it makes sense:
It would mean amending how <?php wp_list_cats(); ?> works...
Each category is allocated an ID, with category parent as 0
each sub category has a category parent ID other than 0.
By utilising this information it should be possible to allocate/autogenerate an id, or a class, to a category li tag. Preferably related to the current ID, so using the ID number might be useful.
In the main stylesheet, or an autogenerated additional sheet, you a add ul.children { display:none;}
which will hide all sub categories.
In the template you add some css to the header:
#ID.children{display:block}
where ID is also autogenerated and relates to the current viewed category ID or category_parent
so if you were looking at a category entitled 'About' with an ID of 10 which had a sub category entitled 'Access' with an ID 11. The generated markup would look like this:
<li id="categories">Categories:- Accessible
the main style would have:
one.children, ten.children{display:none;}
the inserted css generated on the template would have the following, when viewing the relevant page:
ten.children{display:block;}
Is that as clear as mud? I'm hoping it isn't and that conveys my thoughts on this. -
so u dont get to see quicktag bar while posting. pretty cool...
-
I get how the CSS is set up initialy.....OK.... maybe I don't get it.... hang on, I thing we are on different pages of the same book.
OK, let's say I hit your site, come right into the main page.
If I were to see the category links, and click on one that had sub cats.... what would happen?
1) The page refreshes top display that category, and the menu would then "expand" to show the sub cats?
2) The page doesn't refresh and the sub cats "slide" out (like a tree view does in Windows File Exporer)
3) ?? Something I didn't think of ???
TG -
take a look at my website (http://www.taijiquan.pro.br), is this what you want? It is CSS only, but doesn't work on IE (so i had to set up a "links" page).
-
bAs
Posted 5 years ago #I cant seem to get it to work sushubh :(
I know I'm doing it wrong, could you help me please?
I did this part:
1. Copy, paste and save into listCollapse.js file the script listed at the end of
http://www.howtocreate.co.uk/jslibs/htmlhigh/listCollapse.html Then uploas .js file to you wp root folder.
2. Put in your template after <body> tag following script:
<script type="text/javascript" language="javascript1.2" src="listCollapse.js"></script>
<script type="text/javascript" language="javascript1.2"></script>
www.ctfzone.net -
Posted 5 years ago #Actually found something which took a bit more work on my part as far as the links go, but was well worth it.
http://gemal.dk/util/
1- basically edited the images locations in the tread.js with textpad, upload it the your wp root:
{ node.childNodes.item(0).src = "pics/menu_minus.gif";
2- then make your menu links page in textpad(name it links.php or something) by coping the source code from the site (i/e from the test section you like to style after- I did test 3, but renamed it to id01):
<img src="pics/menu_plus.gif" alt="+" width="13" height="13" /> Leagues<div id="id01" style="display:none">
<img src="pics/menu_item.gif" alt="item" width="13" height="13" />
CTFDL
<img src="pics/menu_item.gif" alt="item" width="13" height="13" />
The OGL
<img src="pics/menu_item.gif" alt="item" width="13" height="13" />
Team Warfare
3- put<script type="text/javascript" src="thread.js"></script>in between your head tags.
4- include your new links page in your template where you want it:
<?php include("http://www.yoursite.net/wpdir/linkpage.php"); ?>
5- right click and "save as" the + & - & block item pics from the site and upload them to your site where you made the path(the path for the images is in both the thread.js and the links.php, in this example the pics directory)
site back and say ah. -
Posted 5 years ago #lol, i figured out why the other menu one wasn't working- try not to laugh to hard. I have my wp in dif directory but forgot to edit the right index. I woulda saved myself mucho work, but awell I'm happy with the result.
-
junesix
Posted 5 years ago #TechGnome,
I think elfin is working towards something completely different than the original request of this thread. Elfin appears to be setting up a style so that the front page (index) shows the parent categories and hides the child categories but when you click on a parent category link, the category archive page retrieved would display the child categories.
Elfin, I think you're confused with what the original poster in this thread wanted. He was looking for something that will slide out the child categories when you click or hover over the parent category while still on the same page. -
quite probably junesix...
-
I've been able to hack some bits together for the solution I was looking for, ahve a look at:
Expanding sub category menu via css -
junesix - yeah, I got that after my last post. Which is how I came to be confused how he was doing it all in CSS w/o javascript.
TG
Topic Closed
This topic has been closed to new replies.
