Как сделать вкладку навигационной жидкости

Question

Как сделать вкладку навигационной жидкости

0

У меня есть навигация вверху моей страницы:

который отлично работает на большом экране рабочего стола. Когда я пытаюсь просмотреть его в планшете (8 "или 10"), меню вырезается вправо, как в примере:

Вот мой код для меню:

<div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;">
    <div id="second-menu-navi" class="navi">
        <a title="" href="why_choose_us.aspx" id="tab-1">Why Choose Us</a>
        <a title="" href="physicians.aspx" id="tab-2">Physicians</a>
        <a title="" href="medical_specialties.aspx" id="tab-3">Medical Specialties</a>
        <a title="" href="locations.aspx" id="tab-4">Locations</a>
        <a title="" href="urgent_care.aspx" id="tab-5">Urgent Care</a>
        <a title="" href="radiology.aspx" id="tab-6">Radiology</a>
        <a title="" href="lab.aspx" id="tab-7">Lab</a>
    </div>
</div>

#second-menu-navi {
    float: none !important;
    height: 20px !important;
    margin: 0 auto;
    /*margin: 0px 0px 0px 8px;*/
    width: 1106px;
    z-index: 24;
}

#second-menu-navi a {
    float: left;
    width: 155px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    font-family: 'aleobold', 'soniano_sans_unicoderegular';
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;
    background: rgb(20, 94, 153);
    background: rgba(20, 94, 153, .85); /*#013761; /*url('theImages/nav_menu_85_b.png') repeat; /*#013761;*/
    margin: 0 3px 0 0 !important;
    /*background-image: none !important;*/
    padding: 0 !important;

    -moz-border-radius-bottomleft: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -khtml-border-bottom-left-radius: 4px; 
    border-bottom-left-radius: 4px;

    -moz-border-radius-bottomright: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    -khtml-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px;

    outline: none;
}

/*
#second-menu-navi a:hover, #second-menu-navi a.active {
    background-color:#155E9B;
}
*/

#tab-1:active, #tab-1:hover {
    background-color: #1AA5C1;
}
#tab-2:active, #tab-2:hover {
    background-color: #83ADB7;
}
#tab-3:active, #tab-3:hover {
    background-color: #7A0506;
}
#tab-4:active, #tab-4:hover {
    background-color: #CD71AE;
}
#tab-5:active, #tab-5:hover {
    background-color: #E39259;
}
#tab-6:active, #tab-6:hover {
    background-color: #422F5E;
}
#tab-7:active, #tab-7:hover {
    background-color: #4E68BF;
}
#break-line-2 {
    width: 100%;
    height: 7px;
    border-top: 1px solid #34A25B;
    background-color: #013761;
    position: fixed;
    top: 62px;
    z-index: 23;
}

Как я могу сделать это так, чтобы он был текучим и изменялся на основе ширины экрана?

Si8 18 апр. 2014, в 23:46

Источник

1

Используйте проценты вместо жестко заданных размеров px. Попробуйте установить # second-menu-navi для ширины: 100%;
nFinIt_loop 18 апр. 2014, в 21:05
0

Для отдельных вкладок вы имеете в виду?
Si8 18 апр. 2014, в 21:07
0

Мой плохой, #menuHolder должен иметь ширину 100%;
nFinIt_loop 18 апр. 2014, в 21:08
0

Это на все 100%. Вы имеете в виду # second-menu-navi?
Si8 21 апр. 2014, в 20:18

Показать ещё 2 комментария

Теги:

html

css

2 ответа

0

самый быстрый способ, который я нашел, - сделать ваши статические команды px в%, если ваша максимальная ширина равна 1282px, например, взять длину пикселя, например 155px, и разделить ее на 1282 155/1282 = 0.12090 #second-menu-navi a{width:1.2090%} помните, что вам придется делать это для всех горизонтальных статических команд px.

Plentybinary 18 апр. 2014, в 19:18

Ещё вопросы

Используйте проценты вместо жестко заданных размеров px. Попробуйте установить # second-menu-navi для ширины: 100%;
Для отдельных вкладок вы имеете в виду?
Мой плохой, #menuHolder должен иметь ширину 100%;
Это на все 100%. Вы имеете в виду # second-menu-navi?

aisin · Accepted Answer · 2014-04-19T00-43-00.000Z

См. Демо: http://jsbin.com/folix/2

Для планшета вы можете использовать медиа-запрос для специального css.

Подробнее о медиа-запросе см. В разделе Медиа-запросы для стандартных устройств: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #second-menu-navi {
        width: 1106px;
      margin:0 auto;
        z-index: 24;
        text-align:center;
    }
    #second-menu-navi a {
        display: inline-block;
        padding:12px 30px;
        vertical-align: middle;
        font-family:'aleobold', 'soniano_sans_unicoderegular';
        font-size: 16px;
        font-weight: normal;
        color: #ffffff;
        text-decoration: none;
        background: rgb(20, 94, 153);
        background: rgba(20, 94, 153, .85);
        margin: 0 3px 5px 0 !important;
        border-radius:0 0 4px 4px;
        outline: none;
    }
    #tab-1:active, #tab-1:hover {
        background-color: #1AA5C1;
    }
    #tab-2:active, #tab-2:hover {
        background-color: #83ADB7;
    }
    #tab-3:active, #tab-3:hover {
        background-color: #7A0506;
    }
    #tab-4:active, #tab-4:hover {
        background-color: #CD71AE;
    }
    #tab-5:active, #tab-5:hover {
        background-color: #E39259;
    }
    #tab-6:active, #tab-6:hover {
        background-color: #422F5E;
    }
    #tab-7:active, #tab-7:hover {
        background-color: #4E68BF;
    }
    #break-line-2 {
        width: 100%;
        height: 7px;
        border-top: 1px solid #34A25B;
        background-color: #013761;
        position: fixed;
        top: 62px;
        z-index: 23;
    }
    @media only screen and (max-width:1024px) {
        #second-menu-navi {
            width:100%;
        }
    }
    </style>
</head>

<body>

    <div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;">
        <div id="second-menu-navi" class="navi">
            <a title="" href="why_choose_us.aspx" id="tab-1">Why Choose Us</a>
            <a title="" href="physicians.aspx" id="tab-2">Physicians</a>
            <a title="" href="medical_specialties.aspx" id="tab-3">Medical Specialties</a>
            <a title="" href="locations.aspx" id="tab-4">Locations</a>
            <a title="" href="urgent_care.aspx" id="tab-5">Urgent Care</a>
            <a title="" href="radiology.aspx" id="tab-6">Radiology</a>
            <a title="" href="lab.aspx" id="tab-7">Lab</a>
        </div>
    </div>


</body>

</html>

Спасибо за ответ. Есть ли способ уменьшить его вместо перехода на следующую строку?