HTML5 пользовательское встроенное горизонтальное меню - PullRequest
0 голосов
/ 25 мая 2011

[править] Обратите внимание, что это не дублирующая тема, хотя она вращается вокруг той же темы, что и предыдущая. [/ Править]

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

Так что в основном я делал это раньше, хотя, как я выяснил, было несколько сомнительных подходов, которые я должен был исправить сейчас. Среди прочего я больше не использую display: table-cell, а вместо этого display: inline-block.

Так в чем же проблема? Ну, я хочу достичь некоторой степени совершенства, и, поскольку я легко запутался, я бы очень хотел, чтобы некоторые из вас посмотрели его и передали ваши комментарии и предложения. Может быть, потратьте несколько минут, чтобы помочь мне привести в порядок CSS и т. Д.

Теперь у меня нет никаких ожиданий, и я понимаю, что я не единственный нуждающийся человек, но если у вас будет время, я буду очень благодарен. Вот ссылка на рабочий пример. http://jsfiddle.net/7fD4S/

HTML должен быть в порядке, хотя меня немного раздражает, что я не могу представить список, вероятно, из-за того, как он влияет на свойство inline-block, но я могу с этим смириться.

Что касается CSS, как я объяснил, я легко путаю себя. Я думаю, что CSS нужно немного привести в порядок, но, честно говоря, я не могу справиться с этим.

В общем, я просто хочу одобрения. что все сделано правильно, что нет серьезных проблем и тому подобное.

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

Ну вот и все.

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

Edit: Обновленный пример: http://jsfiddle.net/7fD4S/1/

Edit: Обновленный пример: http://jsfiddle.net/7fD4S/2/ Изменена позиция top с 21 до 20px, чтобы избежать пропуска.

1 Ответ

2 голосов
/ 25 мая 2011

Единственное, что я действительно заметил, это то, что вы должны измениться:

header div {
    top: 21px;
}

Для

header div {
    top: 20px;
}

В противном случае существует мертвая зона @ граница 1px, которая, по-видимому, не вызывает эффекта: hover и, следовательно, делает ее неустойчивой.

...