Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.11.2016, 22:49   #1
CortesGames
Пользователь
 
Аватар для CortesGames
 
Регистрация: 23.10.2016
Сообщений: 86
По умолчанию Анимированое подчеркивание кнопок меню

Мне понравилась идея меню с подчеркиванием кнопок и я решил попробовать сделать такое меню. Погуглив я нашел код для подчеркивания ссылок и решил переделать его под кнопки, но как я не воротил этот код ничего не выходит, подчеркивание намертво засело под белой линией, а мне нужно чтобы оно было на ней(выше грани меню). Если кто знает как исправить, буду благодарен за совет.
HTML:
Код HTML:
<!DOCTYPE html>
<html lang="uk">

<head>
    <meta charset="UTF-8">
    <title>Сайт</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="img/Screenshot_1.png" alt="">
        </div>
        <div class="h-nav">
            <ul>
                <li><a href="#about">О нас</a></li>
                <li><a href="#catalogue">Каталог</a></li>
                <li><a href="#pricelist">Цены</a></li>
                <li><a href="#contacts">Контакты</a></li>
                <li><a href="#map">Карта</a></li>
            </ul>
        </div>
    </div>
    <div class="main">
    
    </div>
    <div class="footer">
        <div class="f-nav"></div>
    </div>
</body>

</html>
CSS:
Код:
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic-ext');
* {
    padding: 0px;
    margin: 0px;
}

body {
    background: #000;
}

.header {
    height: 65px;
    background-color: #ffffff;
}

.logo {
    margin-left: 50px;
    float: left;
    position: inherit;
    box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.75);
}

.h-nav {
    margin-left: 100px;
    display: inline-block;
    position: inherit;
    height: 55px;
    line-height: 50px;
    text-align: center;
}

.h-nav > ul {
    font-size: 0px;
}

.h-nav > ul li {
    display: inline-block;
    height: 45px;
}

.h-nav > ul > li > a {
    display: inline-block;
    font-family: 'PT Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 0 50px;
    line-height: 65px;
    text-decoration: none;
    color: #474c48;
}

.h-nav > ul > li:after {
    display: block;
    content: "";
    height: 5px;
    width: 0%;
    background-color: #ffeb3b;
    transition: width .3s ease-in-out;
}

.h-nav > ul > li:hover:after,
.h-nav > ul > li:focus:after {
    width: 100%;
}
Насылаю баги по фотографии

преимущественно себе
CortesGames вне форума Ответить с цитированием
Старый 13.11.2016, 23:12   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Не увверен что именно такой эффект ты хотел. Попробуй, отпишись. Идея на самом деле прикольная !

Я чуть-чуть от себя добавил

::::::::::::::::::::::::::::::::::: :::::
Вот вроде ничего так.
Код:
*{
    padding: 0px; margin: 0px;
}

body {
    background: #000;
}

.header {
    height: 55px; width: 100%; text-align: center; background: #fff;
}

/* ------------------------------------------------------------------ */
.h-nav {
    display: inline-block; height: 55px; text-align: center; vertical-align: top;
}

/* ------------------------------------------------------------------ */
.logo {
    width: 200px; height: 55px; display: inline-block; vertical-align: top;
    box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.75);
}

.logo img{
    width: 200px; height: 55px; display: block;
}

/* ------------------------------------------------------------------ */
.h-nav > ul li {
    display: inline-block; height: 55px; margin: 0 1px; background: #FFF;
    padding: 15px 10px; box-sizing: border-box;
}

.h-nav > ul > li > a {
    display: inline-block; font-size: 18px; text-decoration: none; color: #59f;
    font-family: monospace; letter-spacing: 0px; font-weight: bold;
    text-shadow: 1px 1px 1px #333; text-transform: uppercase;

}

/* :::::::::::::::::::::::::::::::::::::::: */
/* BOTTOM */
.h-nav > ul > li:after {
    display: block; content: ''; height: 5px; width: 0%; background-color: #07F; 
    transition: width .3s ease-in-out; margin: 2px 0 0 0;
}

.h-nav > ul > li:hover:after, .h-nav > ul > li:focus:after {
    width: 100%;
}

/* :::::::::::::::::::::::::::::::::::::::: */
/* TOP */
/*
.h-nav > ul > li:before {
    display: block; content: ""; height: 5px; width: 0%; background-color: #07F; 
    transition: width .3s ease-in-out; margin: -5px 0 0px 0;
}

.h-nav > ul > li:hover:before, .h-nav > ul > li:focus:before {
    width: 100%;
}
*/
/* :::::::::::::::::::::::::::::::::::::::: */
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/

Последний раз редактировалось pompiduskus; 13.11.2016 в 23:41.
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подчеркивание текста в richtextbox Vault13 C# (си шарп) 1 02.07.2015 18:59
Выделение кнопок меню MedwedoS HTML и CSS 0 14.07.2014 18:53
Можно ли менять фон кнопок разной длины в горизонтальном меню на roll-over c CSS? shavedcat HTML и CSS 15 05.04.2013 12:42
Частичное подчеркивание AesmaDiv Microsoft Office Excel 4 05.12.2010 17:37
графическое подчеркивание ссылок в меню lisa3281 HTML и CSS 1 08.03.2009 14:32