| « prev next » |
Вы заметили изменения в заголовок моего блога? Посмотрите на этот снимок экрана в конце этой статьи.
Вчера я добавил глобальных навигационных меню для моего блога. Я люблю это изменение очень, и он дает людям возможность погрузиться вглубь конкретной категории более быстро и просто с любой страницы. Если Вам нравится дизайн, и можно задаться вопросом, как можно создать то же самое в вашем MovableType поддержке сайта? Вот быстрый руководства.
HTML
Это код я использовал в моем шаблоне (я ставлю его в отдельный модуль Header).
<div <MTTopLevelCategories> <ul id="nav"> <li id="nav_menu"> class="top"> <= класс "сверху" href = "<$ MTCategoryArchiveLink $>"><$ MTCategoryLabel долл. > </> <ul> <MTSubCategories> <li> <классе = "нав" href = "<$ MTCategoryArchiveLink $>"> <$ MTCategoryLabel $> </> </ л> </ MTSubCategories> </ ул> </ ул> </ MTTopLevelCategories> </ div>
Ключевым здесь является создание div с идентификатором нав, а затем несколько ул nav_menu с идентификатором, затем положить верхний уровень меню внутри этого тега. Тогда есть другой ул fewl и положить Подменю пунктов в нем. Это так просто.
CSS
В Вашем CSS (jianshuowangstyle.css в моем случае), добавьте следующий код. Кредитные идет Ливид и его V2EX для вдохновения и образец кода.
div # (нав границы: 1px твердых # CC9900; - верхней границы: 0px; ясно: обе; Высота: 21px; фон - цвет: # F0F8FF; margin-top вниз: 10px; фон - цвет: # EAEFF4; ясно; оба; прокладкой : 0px)
div # нав: ссылка, div # нав: посетил (цвет: # 000; текстовая наград: нет;)
div # нав a.top: наведите (фоне - цвет: # F0F8FF)
# nav_menu a.top (отображения: блок; - отступы сверху: 5px; отступы - слева: сторон; уплотнения - вниз: 0px;)
nav_menu #, # nav_menu: посетил (текстовых наград: нет; цвет: 333)
# nav_menu, ул nav_menu # (отступы: 0; разницы: 0; Список стиле: нет;)
# nav_menu a.nav (отображения: блок; - отступы сверху: 2px; Высота: 17px; ширина: 14em;)
# nav_menu л (поплавка: слева;)
# л nav_menu ул (отображения: блок; Позиция: абсолютная; ширина: 14em; осталось: - 999em;
непрозрачность:, 99; фильтр: альфа (непрозрачность = 99); фон - цвет: # FFF;
- отступы сверху: 3px; уплотнения - вниз: 3px;
границы - вниз: 1px твердых # СТС; границы права: 1px твердых # СТС; границы осталось: 1px твердых # СТС; з - индекс: 99;)
div # нав a.nav: наведите (цвет: # FFF; текстовая наград: нет; фон - цвет: # 667;)
div # нав a.nav: Активные (цвет: # FFF; текстовая наград: нет; фон - цвет: # 333;)
# nav_menu л: наведите ул, # nav_menu (li.sfhover ул осталось: автоматическая;)
Сценарист?
Существует не JavaScript участие в этом. Странным? Способом является установить слева имущества -999 em, которые далеко на левой стороне экрана края, и навести, установить его автоматически.
Если вы хотите функции, только не стесняйтесь использовать код (CSS и HTML), и вы получите ее.
Для моей читатели, вы любите этого маленького улучшения?