Как добавить однопиксельную тень вокруг главной навигационной ссылки вместе со всем раскрывающимся списком суб-навигации? - PullRequest
Новая
       21

Как добавить однопиксельную тень вокруг главной навигационной ссылки вместе со всем раскрывающимся списком суб-навигации?

0 голосов
/ 26 апреля 2011

Я использую раскрывающиеся меню с моими основными навигационными ссылками, и мне нужно добавить тень на один пиксель вокруг всего (текущей кнопки навигации / ссылки (которая имеет закругленные углы с использованием border-radius) и всей под-навигации элемент, который опускается вниз).

Я разместил демо-версию на JSFiddle:

http://jsfiddle.net/thebluehorse/TFqjR/2/

Может кто-нибудь обновить его или мне, что нужно сделать, чтобы у него была тень на один пиксель вокруг всего, когда вы перемещаетесь по навигационной ссылке? Обратите внимание, что в главном меню необходимо обойти закругленные углы. Он должен поддерживать IE7 +, но, думаю, если использовать box-shadow, то CSS3 Pie можно использовать в качестве помощника.

Любая помощь будет принята с благодарностью. Эта вещь сводит меня с ума.

1 Ответ

1 голос
/ 26 апреля 2011

Есть несколько способов достичь своей цели. Самое простое - установить статический класс для ваших вложенных ul элементов. Это связано с тем, что они видны только тогда, когда они вызваны событием наведения родителя. Пример: http://jsfiddle.net/deloretta/gspnK/ (примечание: чтобы не допустить «перепрыгивания» текста внутри родительского элемента, вы можете попробовать добавить к элементу отступ в 1 пиксель и удалить его при наведении курсора, выравнивание текста по центру или любой другой метод тебе нравится).

Во-вторых, более неэффективным способом (но он использует его, который я не буду здесь описывать) вы можете узнать, есть ли у этого элемента дочерние элементы, и применить к ним класс следующим образом: http://jsfiddle.net/deloretta/XVrr6/

В идеале стили IE7 + должны находиться в их собственной таблице стилей (поскольку IE7 + поддерживает синтаксис !important), и вы можете получить к ним доступ, используя условные комментарии. По сути, удалите свойства border и поместите их в таблицу стилей, специфичную для IE. IE игнорирует объявления -moz- и -webkit- и правильно отображает свойства border, тогда как moz / webkit игнорирует условные комментарии и отображает тень блока. Прекрасный жаблы.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ - ответ на ваш первоначальный комментарий:

Мне кажется, я понимаю ваш комментарий. Если нет, дайте мне знать, и я постараюсь помочь вам в дальнейшем.

Чтобы сделать эту работу с условными комментариями, вы должны разделить два стиля. Один специфический для IE, а другой для всех других браузеров. Вы можете сделать это так: 

<link rel="stylesheet" type="text/css" href="/style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/style_ie.css"> 
<![endif]-->

Затем вам следует изменить существующую таблицу стилей, чтобы она содержала следующую информацию: 

#nav #link1.selected > a {
  padding-bottom: 10px;
  margin-bottom: 0;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  /*the border declaration used to be here
  but we moved to another stylesheet
  specifically for IE*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}
.static_class{
  /*border used to be here*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}

Затем создайте отдельную таблицу стилей с именем styles_ie.css - в ней будет размещена информация о границах, которую мы удалили из другой таблицы стилей. Вот так: 

#nav #link1.selected > a {
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}
.static_class{
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}

Итак ... Что происходит?

Internet Explorer - единственный браузер, поддерживающий условные комментарии. Поэтому, когда Firefox, Safari или Chrome попадают на страницу, они игнорируют комментарии и, следовательно, не отображают таблицу стилей, связанную в комментариях.
Когда Internet Explorer попадает на страницу, он отображает все, что понимает, из styles.css - игнорируя свойства border-radius и box-shadow и т. Д. (Потому что он их не понимает). Затем он переходит к условным комментариям (которые он понимает), затем загружает таблицу стилей styles_ie.css и затем применяет дополнительный стиль к элементам. Легко-peasy, лимонный отжим:]

...