Html меню боковое: Как сделать меню с фиксированной боковой навигацией

alexxlab

Содержание

html — Боковое меню на всю высоту страницы

Ребят, либо я очень туплю, либо это нельзя сделать? Помогите, пожалуйста.

Есть хидер и футер (абсолютно позиционированный и прижатый к низу страницы). Так же есть боковое меню, которое должно растягиваться на всю допустимую высоту. Как это сделать?

http://jsfiddle.net/v9tj3/5/

 <div>
        <div>
            <div></div>
        </div>
        <div>
            <div>
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пункт <br />
                пунктend    
            </div>
            <ul>
                <li>111111</li>
                <li>222222</li>
                <li>3333</li>
                <li>4444444444</li>
                <li>5555555</li>
                <li>ABCD</li>
            </ul>
        </div>
        <div></div>
        <div>
        <span>LEFT</span>
        <span>RIGHT</span>
        </div>
    </div>

—

* {
    margin: 0px;
    padding: 0px;
}
html,
body {
    height: 100%;
}
ul {
    //display: inline;
    display: inline-block;
    font-size: 12px;
    list-style: none;
    margin-top: 10px;
    zoom: 1;
}
li {
    background: #000;
    color: #fff;
    display: inline;
    float: left;
    height: 22px;
    margin-right: 2px;
    overflow: hidden;
    text-align: center;
}
. container {
    min-height: 100%;
    position: relative;
}
.header {
    background: #d1d4d9;
    border: 1px solid #000;
    box-shadow: 0px 0px 10px #a9a9a9;
    height: 108px;
    z-index: 5;
}
.logo {
    background: #000;
    float: right;
    height: 91px;
    margin: 5px 5px 5px 0px;
    width: 206px;
}
.footer {
    background: #9e2627;
    border-top: 3px solid #000;
    bottom: 0px;
    height: 30px;
    position: absolute;
    width: 100%;
}
.footer-helper {
    height: 30px;
    width: 100%;
}
.lBlock {
    background: #27919e;
    box-shadow: 2px 0px 10px #cecdd2;
    color: #fff;
    float: left;
    width: 200px;
    z-index: -5;
}
.rBlock {
    overflow: hidden;
    text-align: center;
    width: 100%;
}
.left {
    float: left;
}
.right {
    float: right;
}
  • html
  • css

12

Вот первый результат по 2 колонкам одинаковой высоты css

http://htmlbook.

ru/blog/4-metoda-sozdaniya-kolonok-odinakovoy-vysoty

  • еще можно display: table

Нужно задать для колонки свойство — height: 100%;. Странно что вы указали колонке абсолютную высоту в 200px и надеетесь, что она растянется на всю страницу. Если возникнут проблемы — обращайтесь в комментарии

6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Адаптивное боковое меню на чистом CSS

  • org/Breadcrumb»>Главная
    • >
  • Всё для сайта
    • >
  • Меню для сайта

День добрый. В этом посте я выкладывают отличный скрипт бокового адаптивного выдвигающегося меню на голом CSS. Меню анимированное, с плавным раскрытием и в двух вариациях: слева и справа. Отличный вариант для тех, кто хочет сделать мобильное адаптивное меню для своего сайта.

В архиве отдельный файл CSS для правого меню и для левого. Подключить  данный скрипт довольно легко. Нужно лишь выполнить несколько шагов:

Скачать zip-архив

Скачать его можно по ссылке внизу «Скачать». Также необходимо разархивировать zip-архив

Закачать css файл

Закачиваем в папку css в корне сайта нужный файл css. Если вам нужно меню слева, то left-nav-style. css, если справа, то right-nav-style.css

Подключить css файл

Незабываем подключить нужный css файл, вставив между <head> и </head>

<link rel="stylesheet" href="css/left-nav-style.css">

если нужно подключить левое боковое меню и 

<link rel="stylesheet" href="css/right-nav-style.css">

если правое

Прописать HTML код

Ну и самое главное, в самое начало сайта после открытия тега <body> вставляем следующий HTML код:

<!-- 
    Скрытый checkbox, отвечающий за переключение панели, должен быть в верхней части документа, лучше сразу после тега `<body>`
    `id` атрибут предназначен для связки с атрибутом `for` тега <label>
    Атрибут `hidden` указывает состояние «скрытый» у текущего элемента
    -->
    <input type="checkbox" hidden>
    <!-- 
    Выдвижную панель размещаете ниже
    флажка (checkbox), но не обязательно 
    непосредственно после него, например
    можно и в конце страницы
    -->
    <nav>
        <!-- 
    Метка с именем `id` чекбокса в `for` атрибуте
    Символ Unicode 'TRIGRAM FOR HEAVEN' (U+2630)
    Пустой атрибут `onclick` используем для исправления бага в iOS < 6.
 
 
 0
    См: http://timpietrusky.com/advanced-checkbox-hack 
    -->
        <label for="nav-toggle" onclick></label>
        <!-- 
    Здесь размещаете любую разметку,
    если это меню, то скорее всего неупорядоченный список <ul>
    -->
        <h3> 
            <a href="https://bayguzin.ru/">Bayguzin.ru</a> 
        </h3>
        <ul>
            <li><a href="#1">Один</a>
            <li><a href="#2">Два</a>
            <li><a href="#3">Три</a>
            <li><a href="#4">Четыре</a>
            <li><a href="#5">Пять</a>
            <li><a href="#6">Шесть</a>
            <li><a href="#7">Семь</a> 
        </ul>
    </nav>
    <!-- 
    Маска (затемнение) основного контента при включенной панели
    по-умолчанию данная фишка не используется, если оно вам надо,
        просто расккоментируйте div-контейнер ниже
        
    <div></div>
        -->
        
    <!-- 
    Далее размещаем любую разметку,
    много слов, картинки и т.
  д...
    -->

На размещение меню влияет только css файл, html код абсолютно одинаковый.

Если вы всё сделали правильно, то скрипт заработает. Скачать его вы можете по ссылке внизу абсолютно бесплатно и по прямой ссылке. Для более детального ознакомления с меню можете пройти по ссылке «Демо» и увидеть скрипт в работе. Пока

Если вы не видите кнопку «Скачать»


отключите блокировщик рекламы

Скачать (15.65 Kb) Demo