Меню меток поста №1

Вообще никогда в ней не нуждалась. Но раз она есть, надо что-нибудь сделать. Видите пример на картинке, ниже код к нему. Это мой первый блин, так что сразу о недостатках. Эта навигация исчезает, когда проходишь на другую страницу, кроме блога и постов. Хотя тем, кто не включает блок обычной навигации, переживать не о чем. А вот когда ее нет, остается пустое место. Если бы я придумала что по интересней, было бы не страшно. Например можно не делать отступ #all .left, а постаить вверх свободный блок с какой-нибудь картинкой. Так она будет фоном для меню, а в отсутствии просто красоваться. Если будут идеи, узнаете. )


CSS

Настраиваем положение и просим больше не прятаться 

.combo ul{display:inline;list-style:none;position:absolute; top: 10px; right: -290px;}
.combo-active ul{display:block!important; position:absolute; background: transparent; border:none; z-index:2;margin-top:0px; padding: 0;}

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

.combo .selected{border:solid 1px transparent;position:relative;z-index:3; color: transparent; text-decoration:none;margin:1px 0;padding: 6px 16px 4px 6px}

.combo-active .selected{background-color:transparent; border:none;margin:0!important}

А теперь ссылки. Сначала оформим кнопку: размер, положение ссылки, фон и рамка.

.combo li{float:none!important;width:270px;height:30px;text-align: center;margin-bottom:1px;
       -moz-box-shadow:inset 0px 1px 0px 0px #4a4947;
       -webkit-box-shadow:inset 0px 1px 0px 0px #4a4947;
       box-shadow:inset 0px 1px 0px 0px #4a4947;        

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #383838), color-stop(1, #242424));
       background:-moz-linear-gradient(top, #383838 5%, #242424 100;
       background:-webkit-linear-gradient(top, #383838 5%, #242424 100;
       background:-o-linear-gradient(top, #383838 5%, #242424 100;
       background:-ms-linear-gradient(top, #383838 5%, #242424 100;
       background:linear-gradient(to bottom, #383838 5%, #242424 100;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#383838', endColorstr='#242424',GradientType=0);

        background-color:#383838;        

        -moz-border-radius:3px;
       -webkit-border-radius:3px;
       border-radius:3px;
       border:1px solid #000000;
}

Кнопка при наведении курсора

.combo li:hover {        

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #242424), color-stop(1, #383838));
       background:-moz-linear-gradient(top, #242424 5%, #383838 100;
       background:-webkit-linear-gradient(top, #242424 5%, #383838 100;
       background:-o-linear-gradient(top, #242424 5%, #383838 100;
       background:-ms-linear-gradient(top, #242424 5%, #383838 100;
       background:linear-gradient(to bottom, #242424 5%, #383838 100;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#383838',GradientType=0);        

        background-color:#242424;
}

Текст ссылки в кнопках

.combo li a{text-decoration:none;border-bottom: none; color:#FFF; font-family:Trebuchet MS; font-size:16px; font-weight:bold; text-shadow:0px 1px 0px #000000;}

Эта фигня в целом

#blog-types{float:left;margin:4px 0 0;}

Пометка над постом

.post_type {background: #303030;border: 1px solid black; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; color: #FFF; padding: 1px 5px 1px 6px;}

Да. Теперь же надо виджеты подвинуть, чтоб это меню сверху не закрывало.

#all .left{margin-top:320px;}

Все. Спасибо за внимание.
Обсудить у себя 3
Комментарии (1)

И тебе спасибо!

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: