Изогнутые вкладки меню - PullRequest
Новая
       8

Изогнутые вкладки меню

0 голосов
/ 17 декабря 2009

Я пытаюсь сделать закругленные углы в динамическом меню с вкладками, используя Drupal и модуль динамического постоянного меню (отсюда и определения динамического постоянного стиля в приведенном ниже коде) Вы можете увидеть код и меню на 99% прямо здесь: http://vpscentre.co.uk/sandbox/ Кто-нибудь может сделать мое решение на 100% правильным и сделать так, чтобы navi_top_right.png и navi_top_left.png оба показывали одновременно?

HTML, который я создал для создания активного элемента меню, находится здесь:

VPS-серверы

Я перепробовал много комбинаций CSS и теперь думаю, что мне нужно открыть эту проблему для сообщества!

Вот соответствующие определения таблиц стилей, которые я сейчас использую:

a.dynamic-настойчивый-меню пункт меню { background: url (images / фоны / бизнес / navi_top_left.png) вверху слева без повторов; }

.dynamic-persistent-menu-menu li.active, .dynamic-persistent-menu-menu a: hover {

background: # 093056 url (images / background / business / navi_top_left.png) вверху слева no-repeat;

* *} Тысяча двадцать-один

.dynamic-persistent-menu-menu-item a.active {

background: # 093056 url (images / background / business / navi_top_right.png) в правом верхнем углу без повторов;

}

Ответы [ 4 ]

1 голос
/ 17 декабря 2009

Вы можете попробовать border-radius в своем CSS, сводит на нет необходимость использования нескольких графических элементов.

Работает в FF, Safari и Chrome ... по умолчанию квадратные углы в IE / Opera.

См. здесь для получения дополнительной информации.

0 голосов
/ 18 декабря 2009

А как насчет добавления div до и после? 

<style type="text/css"> 
  .left_corner { 
    display:inline; 
    background: #093056 url(left.png) top left no-repeat !important; 
  } 

  .right_corner { 
    display:inline; 
    background: #093056 url(left.png) top right no-repeat !important; 
  } 
</style>
</head> 
<body> 
  <div>
    <div class="left_corner">&nbsp;</div>content<div class="right_corner">&nbsp;</div>
  </div>

Это работает во всех браузерах !!!

0 голосов
/ 17 декабря 2009

вы всегда можете попробовать использовать SpiffyCorners - реализацию CSS - http://www.spiffycorners.com/ - требуемая разметка немного утомительна, хотя

Вы также можете попробовать niftyCube, если не возражаете против использования немного JavaScript - http://www.html.it/articoli/niftycube/index.html

Если честно, я считаю, что вы должны использовать свойство border-radius, а затем блокировать доступ любого пользователя, использующего IE, к вашему сайту:)

0 голосов
/ 17 декабря 2009

Вам нужен эффект «раздвижных дверей»:

http://www.alistapart.com/articles/slidingdoors/

В общих чертах, вы задаете

верхний левый угол и верхний правый угол, используя фоновое изображение и некоторые отступы / поля. Затем вы позволяете содержимому раздвинуть обе стороны, чтобы текст всегда совпадал.

Я использовал ту же технику на www.mallorca.nl, верхний левый блок с закругленными оранжевыми углами: 

<div id="destwrapheader">
  <h2 style="font-size: 15px;">Vind jouw ideale Mallorca bestemming!</h2>
</div>

#destwrapheader {
  background:transparent url(images/mallorca/destinationblock/destination_top_right.png) no-repeat scroll right top;
}

#destwrapheader h2 {
  background:transparent url(images/mallorca/destinationblock/destination_top_left.png) no-repeat scroll left top;
margin:0 28px 0 0;
padding:0 0 0 12px;
}

Нечто подобное относится и к другим закругленным углам, расположенным ниже на странице.

Небольшая проблема: вам нужно указать

, что активна внутренняя ссылка, а не сама ссылка.

Или вы можете просто игнорировать старые браузеры и использовать радиус рамки CSS3, конечно:

http://css3.info/preview/rounded-border
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...