Expanding sub category menu via css
-
I wanted a css solution to hide sub-categories unless you were in that section.
Why? well it gives WP a ‘cms’ feel, and it is useful for a project I am working on.
To see this in action have a look at elfden
The solution is a bit convoluted and lenghty. My apologies for this, I am not experienced in php.
Firstly we hide any children
In your style sheet add this:
.children{
display:none;
}
(though that could easily go in your template)
You also need to add a function call into the template:
Change this:
<style type="text/css" media="screen">
@import url( <?php echo get_settings('siteurl'); ?>/elf-layout.css );
</style>
to this:
<style type="text/css" media="screen">
@import url( <?php echo get_settings('siteurl'); ?>/elf-layout.css );
li.test<?php echo get_here('current'); ?> .children{ display:block !important; }
</style>
The !important ensures that when matched it will overide any other css settings.
However we need to amend a little bit of wp_list_cats to add an extra class to all category links.
This has an added benefit in that you could style them all differently. To achieve this you need to
amend in template-functions-category.php, around line 388, the following:
if ($list) {
$thelist .= "\t- $link\n";
} else {
$thelist .= "\t$link
\n";
}
change to:
if ($list) {
$test =$category->cat_ID;
$thelist .= "\t<li class='test$test'>$link\n";
} else {
$thelist .= "\t$link
\n";
}
$test returns the category id and inserts it as a class for each category listed.
Next we create a function in my-hack.php that returns the category id or parent category id if it exists.
In my-hack.php:
function get_here($current){
global $wpdb, $tablecategories;
$current = $_GET[cat];
$catp = $wpdb->get_results("SELECT cat_ID, category_parent FROM $tablecategories");
foreach($catp as $tcatp) {
$tid = $tcatp->cat_ID;
$tpid = $tcatp->category_parent;
if($current==$tid){
if($tpid==0){
$current=$_GET[cat];
return($current);
}
$current=$tpid;
return($current);
}
}
}
(is there an easier way of doing this?)
Hope the instructions are clear and that it is useful to someone out there. - $link\n";
- The topic ‘Expanding sub category menu via css’ is closed to new replies.