Styling primary links navigation bar (php + css techniques)

I started styling the primary links menu, for which I have decided to have tabs and use the sliding doors technique (more on http://www.alistapart.com/articles/slidingdoors/ , and an example that works out of the box on http://www.dynamicdrive.com/style/csslibrary/item/sliding-doors-tabs-menu/ ). The idea is to have a tab that stretches it´s appearance to accommodate menu item text regardless of it´s length. I have combined this technique with the css-sprites one, to reduce the number of http requests on a page (more on http://www.alistapart.com/articles/sprites/ ).

Following the trace of code (sometimes too modular!) that generates the primary links, under page.tpl.php I replaced the following zen theme code:

<?php if ($primary_links): ?>
<div id="primary">
<?php print theme('links', $primary_links); ?></div> <!-- /#primary -->
<?php endif; ?>

… with this:

<?php if ($primary_links): ?>
<div id="primary">
<ul class="links">
<?php foreach ($primary_links as $link): ?><li><?php $href = $link['href'] == "<front>" ? base_path() : base_path() . $link['href'];print "<a href='" . $href . "'><span>" . $link['title'] . "</span></a>";?></li><?php endforeach; ?></ul></div> <!-- /#primary -->
<?php endif; ?>

This allows me to loop through each menu item and include a <span> tag surrounding each item, necessary for the sliding doors technique. For simplicity I styled the menu in a separate stylesheet file that I called slidingdoors.css, and included the reference in the .info file.

This was of help: http://drupal.org/node/372252

Advertisements

Posted on February 14, 2010, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: