Sliding doors technique in Drupal menu

Posted Wed, 08/04/2010 - 16:22

Наверное, вы уже слышали про технику CSS Sliding Doors, в общем, коротко про нее - это использование 1 или 2х изображений для меню, т.е. на одном изображений мы помещаем 2 состояния, при ховере и в нормальном. Ниже будет описан способ применения в теме друпала.

наше меню в page.tpl.php:

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

Вот наш CSS код:

#primary {
        width:600px;
        position:relative;
        top:127px;
        border:none;
        display:block;
        float:right;
}

#primary ul.primary-links li {
        background:url(img/tab-left.png) no-repeat scroll left 0 transparent;
        display:block;
        float:left;
        margin:0 4px 0 0;
        padding:0 0 0 0.833em;
        position:relative;
        width:auto;
}

#primary ul.primary-links li a,
#primary ul.primary-links li a:link,
#primary ul.primary-links li a:visited {
        background:url(img/tab-right.png) no-repeat scroll right 0 transparent;
        color:#656565;
        display:block;
        padding:0.416em 0.833em 0.083em 0;
        text-decoration:none;
}

#primary ul.primary-links li a:hover,
#primary ul.primary-links li:hover a,
#primary ul.primary-links li.hover a,
#primary ul.primary-links li a.active,
#primary ul.primary-links li.active-trail a {
        background-position:right -46px;
        color:#7C7900;
}

#primary ul.primary-links li:hover,
#primary ul.primary-links li.hover,
#primary ul.primary-links li.active {
        background-position:left -41px;
}

Суть этой техники заключается в том, чтобы использовать в li элементах изображение левой стороны нашего меню, а в ссылке правое изображение, которое будет смещаться.

AttachmentSize
Левая часть333 bytes
Правая часть506 bytes