<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cozmoslabs &#187; menu dropdown</title>
	<atom:link href="http://www.cozmoslabs.com/tag/menu-dropdown/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cozmoslabs.com</link>
	<description>Web design and development experiment.</description>
	<lastBuildDate>Thu, 01 Jul 2010 09:26:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Quickly add a Category DropDown to Thematic 0.9</title>
		<link>http://www.cozmoslabs.com/2009/03/20/quickly-add-a-category-dropdown-to-thematic-09/</link>
		<comments>http://www.cozmoslabs.com/2009/03/20/quickly-add-a-category-dropdown-to-thematic-09/#comments</comments>
		<pubDate>Fri, 20 Mar 2009 08:39:05 +0000</pubDate>
		<dc:creator>Cristian</dc:creator>
				<category><![CDATA[Theme Design]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[category dropdown]]></category>
		<category><![CDATA[menu dropdown]]></category>
		<category><![CDATA[Thematic]]></category>

		<guid isPermaLink="false">http://www.cozmoslabs.com/?p=300</guid>
		<description><![CDATA[With the launch of Thematic 0.9 we now have out of the box drop-down menus to work with. This is one of the many features added to 0.9 that was requested by the community. However sometimes one might want to replace the default Thematic menu with a menu composed with the categories and sub-categories of [...]


Related posts:<ol><li><a href='http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/' rel='bookmark' title='Permanent Link: Replacing the Thematic Menu with a DropDown List of Categories'>Replacing the Thematic Menu with a DropDown List of Categories</a></li>
<li><a href='http://www.cozmoslabs.com/2009/02/12/thematic-drop-down-menu/' rel='bookmark' title='Permanent Link: Drop Down Menu for Thematic'>Drop Down Menu for Thematic</a></li>
<li><a href='http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/' rel='bookmark' title='Permanent Link: Add a search box to the thematic menu'>Add a search box to the thematic menu</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>With the launch of <a href="http://themeshaper.com/thematic-for-wordpress/">Thematic 0.9</a> we now have out of the box drop-down menus to work with. This is one of the many features added to 0.9 that was requested by the community. However sometimes one might want to replace the default Thematic menu with a menu composed with the categories and sub-categories of your WordPress installation. </p>
<p>Although I&#8217;ve done in the past a similar tutorial that one isn&#8217;t working anymore with the latest Thematic version so here is a quick and easy way to add a Category DropDown.</p>
<p><strong>First </strong>create a <a href="http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/">ChildTheme</a>.<br />
<strong>Second</strong> create and then open the <em>functions.php</em> file that should be found in your new ChildTheme.<br />
<strong>Third</strong> add this code to the <em>functions.php</em> file:</p>
<pre class="brush: php;">

#Add a drop down category menu
function childtheme_category_menu() { ?&gt;
        &lt;div id=&quot;category-menu&quot; class=&quot;menu&quot;&gt;
            &lt;ul id=&quot;category-nav&quot; class=&quot;sf-menu&quot;&gt;
                &lt;?php wp_list_categories('title_li='); ?&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
&lt;?php }
add_action('wp_page_menu','childtheme_category_menu');
</pre>
<p>Save and test. You should now have a drop-down from your categories!</p>


<p>Related posts:<ol><li><a href='http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/' rel='bookmark' title='Permanent Link: Replacing the Thematic Menu with a DropDown List of Categories'>Replacing the Thematic Menu with a DropDown List of Categories</a></li>
<li><a href='http://www.cozmoslabs.com/2009/02/12/thematic-drop-down-menu/' rel='bookmark' title='Permanent Link: Drop Down Menu for Thematic'>Drop Down Menu for Thematic</a></li>
<li><a href='http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/' rel='bookmark' title='Permanent Link: Add a search box to the thematic menu'>Add a search box to the thematic menu</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.cozmoslabs.com/2009/03/20/quickly-add-a-category-dropdown-to-thematic-09/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Replacing the Thematic Menu with a DropDown List of Categories</title>
		<link>http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/</link>
		<comments>http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/#comments</comments>
		<pubDate>Wed, 17 Dec 2008 03:27:54 +0000</pubDate>
		<dc:creator>Cristian</dc:creator>
				<category><![CDATA[Recomended Reading]]></category>
		<category><![CDATA[Theme Design]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[category]]></category>
		<category><![CDATA[menu dropdown]]></category>
		<category><![CDATA[Thematic]]></category>

		<guid isPermaLink="false">http://www.cozmoslabs.com/?p=202</guid>
		<description><![CDATA[There comes a time when you might want to use the Thematic Theme for other things then just a blog, like a magazine or a portal and it might be best suited to have the categories of your blog on top instead of your static pages. After all, you&#8217;ll probably have two static pages (about [...]


Related posts:<ol><li><a href='http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/' rel='bookmark' title='Permanent Link: Use WordPress as a CMS with Thematic Theme- Part1'>Use WordPress as a CMS with Thematic Theme- Part1</a></li>
<li><a href='http://www.cozmoslabs.com/2009/06/26/thematic-featured-posts/' rel='bookmark' title='Permanent Link: Add &#8220;Featured Posts&#8221; to your Thematic child theme'>Add &#8220;Featured Posts&#8221; to your Thematic child theme</a></li>
<li><a href='http://www.cozmoslabs.com/2009/03/20/quickly-add-a-category-dropdown-to-thematic-09/' rel='bookmark' title='Permanent Link: Quickly add a Category DropDown to Thematic 0.9'>Quickly add a Category DropDown to Thematic 0.9</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<div class="postimage"><img src="http://www.cozmoslabs.com/wp-content/uploads/2008/12/catdrop.jpg" alt="Thematic Menu DropDown" title="Thematic Menu DropDown" width="300" height="200" class="alignnone size-full wp-image-208" /></div>
<p>There comes a time when you might want to use the <a href="http://themeshaper.com/thematic-for-wordpress/">Thematic Theme</a> for other things then just a blog, like a magazine or a portal and it might be best suited to have the categories of your blog on top instead of your static pages. After all, you&#8217;ll probably have two static pages (about and contact) and several categories and subcategories.</p>
<p>I&#8217;ve seen this request twice in the <a href="http://themeshaper.com/forums/">forums</a> over at ThemeShaper and I&#8217;ll now try and answer it. </p>
<p><strong>I&#8217;ve created a the <em>CatDrop Child Theme</em> that dose just that: transforms Thematic&#8217;s menu into a magazine style category based one!</strong></p>
<div id="preview_download"><a href="http://www.cozmoslabs.com/projects/wp/?theme=catdrop" target="_blank"><img src="http://www.cozmoslabs.com/wp-content/uploads/2008/12/preview.gif" border="0" alt="preview child theme" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="downloadlink dlimg" href="http://www.cozmoslabs.com/wp-content/plugins/download-monitor/download.php?id=2" title="Version 0.1 downloaded 1600 times" ><img src="http://www.cozmoslabs.com/wp-content/plugins/download-monitor/img/download.gif" alt="Download Category DropDown for thematic Version 0.1" /></a></div>
<p><span id="more-202"></span></p>
<div id="showcase_blogs" style="background:#caf8b2;">
In order to install it you have to download the <a href="http://themeshaper.com/thematic-for-wordpress/" onclick="javascript:pageTracker._trackPageview ('/outbound/themeshaper.com');">Thematic Theme</a> (from which this child theme inherits all of the functionality), upload both themes (CatDrop and Thematic) to your server in the themes folder AND THEN ACTIVATE the CatDrop theme.
</div>
<p>Assuming you&#8217;ve already downloaded the latest version of<a href="http://wordpress.org/extend/themes/thematic">Thematic</a> (at the time of the writing it was version 0.7) and uploaded it inside your <em>wp-content/themes</em> directory, we can start the tutorial.</p>
<p>We won&#8217;t modify Thematic directly, instead we&#8217;ll create a <a href="http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/">Child theme</a> and add this functionality to it. To do just that create a directory named <em>catdrop</em> inside your themes folder and two files: <em>functions.php</em> and <em>style.css</em>.</p>
<p>We&#8217;ll start by telling WordPress that our theme is a ChildTheme of thematic add this code into <em>style.css</em>.</p>
<pre class="brush: css;">
/*
Theme Name: CatDrop
Theme URI: http://cozmoslabs.com/
Description: Built on Thematic Theme&lt;/a&gt;
Author: Cristi Antohe
Author URI: http://cozmoslabs.com/
Template: thematic
Version: 0.1
.
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

/************************************************ Style for drop-down menu */
#header{
	z-index:99; /* IE7 z-index bug */
}
#access{
	overflow:visible;
	position:static;
	float:none;
	height:37px;
}
#menu{
	position:static;
	width: 940px;
	margin-top: 0pt;
	margin-right: auto;
	margin-bottom: 0pt;
	margin-left: auto;

	padding-top: 7px;
	padding-right: 0pt;
	padding-bottom: 8px;
	padding-left: 0pt;
	overflow-x: visible;
	overflow-y: visible;
	overflow:visible;
}
#menu ul{
	padding:0;
	margin:0;
}
#menu ul li ul{

}
#menu li{
	margin:0;
	padding:0;
}
#menu li a{
	text-align:center;
	margin:0 0px 0 0;
	width:11em;
	padding:5px;
	border-left:1px solid #6DA5D6;
}
#menu li li li a{
	background:#B5D1EA;
}
#main{
	clear:both;
}
</pre>
<p>I&#8217;ve added some stilling to the <em>#access</em> and <em>#menu</em> divs or the theme would look odd.</p>
<p>Next we need to create our <em>functions.php</em> file. Add the following code to it:</p>
<pre class="brush: php;">
&lt;?php
/* Create unordered lists with our categories */
function categ_menu() {
?&gt;
&lt;div id=&quot;menu&quot;&gt;
&lt;ul class=&quot;sf-menu&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;&lt;?php echo get_option('home'); ?&gt;/&quot; class=&quot;on&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
 	&lt;?php wp_list_categories('orderby=name&amp;amp;amp;exlude=181&amp;amp;amp;title_li=');
 	$this_category = get_category($cat);
 	if (get_category_children($this_category-&gt;cat_ID) != &quot;&quot;) {
 		echo &quot;&lt;ul&gt;&quot;;
			wp_list_categories('orderby=id&amp;amp;amp;show_count=0&amp;amp;amp;title_li=&amp;amp;amp;use_desc_for_title=1&amp;amp;amp;child_of='.$this_category-&gt;cat_ID);
 		echo &quot;&lt;/ul&gt;&quot;;
 	}
	?&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;?php
}
/* Add the needed style and javascript for the dropdown */
function add_to_head(){
?&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/superfish/superfish.css&quot; media=&quot;screen&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/superfish/hoverIntent.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/superfish/superfish.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// initialise plugins
	jQuery(function(){
		jQuery('ul.sf-menu').superfish({
            delay:       300,                            // one second delay on mouseout
            speed:       'fast',                         // faster animation speed
            autoArrows:  false,                          // disable generation of arrow mark-up
            dropShadows: true                            // disable drop shadows
		});
	});
&lt;/script&gt;
&lt;?php
}
add_action('wp_head', 'add_to_head');
add_action('wp_page_menu', 'categ_menu');
?&gt;
</pre>
<p>The <em>categ_menu</em> function is the one that generates the list of categories and the <em>add_to_head</em> one is adding the needed css and javascript files to out Child Theme.(you can get the files from the Child theme download). This could be easily modified to support drop-down pages for the menu but that one some other time!</p>
<p><strong>And this is the way you make Thematic similar to a magazine style WordPress theme!</strong></p>


<p>Related posts:<ol><li><a href='http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/' rel='bookmark' title='Permanent Link: Use WordPress as a CMS with Thematic Theme- Part1'>Use WordPress as a CMS with Thematic Theme- Part1</a></li>
<li><a href='http://www.cozmoslabs.com/2009/06/26/thematic-featured-posts/' rel='bookmark' title='Permanent Link: Add &#8220;Featured Posts&#8221; to your Thematic child theme'>Add &#8220;Featured Posts&#8221; to your Thematic child theme</a></li>
<li><a href='http://www.cozmoslabs.com/2009/03/20/quickly-add-a-category-dropdown-to-thematic-09/' rel='bookmark' title='Permanent Link: Quickly add a Category DropDown to Thematic 0.9'>Quickly add a Category DropDown to Thematic 0.9</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Database Caching 40/97 queries in 0.105 seconds using disk

Served from: www.cozmoslabs.com @ 2010-07-31 02:21:42 -->