И так, как и обещал, продолжаем разбирать наши волшебные положения меню.
В работе с этим элементом нам нужен лишь блок навигации раздела D. Как правило, основная работа идет в D3, но часть элементов можно переместить лишь в блоке D4.
Этап первый. Меню по центру
/* D2 Page navigation
-------------------------------------------------------------*/
Начинаем работу с раздела навигации страницы, он задает основные параметры.
/* D2.1 */
#pun-pagelinks {
position: absolute;
top: -15px;
left: 0;
margin: 0;
border: none;
padding: 0;
width: 100%;
}
Данный код отвечает за размещение по странице нашего меню. Двигает его вверх, низ.
Тут мы пользуемся только положением top. Чем ниже значение, тем ниже меню, чем выше значение, тем оно выше.
/* D3 Forum navigation
-------------------------------------------------------------*/
Данный раздел отвечает за непосредственно положение меню.
Чтобы поставить наше меню по центру, мы отправляемся в D3.2 и вставляем в любое место text-align: center;.
Готово, мы добились постановки меню по центру, но пользовательские ссылки остались слева, чтобы перенести и их в центр, мы ищем блок D4.2 и пишем там же уже известный нам text-align: center;.
Этап второй. Меню в две строки
В две строки можно сделать по разному. Разделить на несколько кусков по 3-4 ссылки в каждом, просто сделать сжатое окошко и наши ссылки превратятся в двух строчный блок. Однако, нужно помнить, расположение в две строки в сжатом блоке, кушает работу с ссылок в некоторых брауезрах.
Вариант первый, разрыв между ссылками.
Ставим мы данный отрезок в блок D3. Ставим с самый конец.
/*Разрыв между ссылками*/
#navsearch {margin-right: 50px;}
#navprofile, #navregister {margin-left: 80px;}
#navprofile {padding-left: 15px !important;}
#navadmin {
position: absolute;
left: 150px;/*сдвиг влево*/
top: 40px;/*положение верх низ*/
}
Вариант второй, сжатый блок.
Отправляемся все в тот же D3.2 и прописываем параметры ширины и длинны.
width: 340px;
hight: 150px;
Наше меню собирается в блок и остается с левой стороны.
Чтобы подвинуть его от левого края, допустим в центр, берем
Ставим его мы туда же, в наш блок D3.2.
Этап третий. Меню блоком
Первый вариант постановки утерян на задворках мира, он крайне тяжел, требует множество нюансов и осторожности, посему, предлагаю более простой и удобный вариант. Второй вариант. Блоком через сжатый блок.
Блоком меню можно собрать пользуясь сжатым блоком второго варианта меню в две строки, так будет более надежно и наш блок не съест ссылки. Мы просто сокращаем ширину. И пользуясь нашим смещением влево, выбираем положение. Добавляем положение top, и двигаем наши ссылки верх и вниз.
position: absolute;/*позиция*/
text-align: center;/*положение текста*/
top: 80px;/*двигаем верх вниз*/
margin-left: 350px;/*двигаем лево*/
padding: 0.3em; /*отступ от края*/
width: 100px;/*ширина*/
Но, тогда выбивает из общего блока ссылка на град, ее как и подарки лучше всего отключать если это mybb, если это rusff, то ссылку мы удаляем кодом.
#navawards {display: none !important;}
Есть так же и третий вариант, он относиться к разряду, что хочу то ворочу, прописка положения каждого элемента.
То есть, мы берем название ссылки, пишем её положение в пространстве и собираем меню либо в блок, либо галочкой, либо раскидываем вообще по всей шапке. Можно смело вынести и за пределы шапки, но тогда есть рис того, что люди с маленьким монитором не увидят ссылок.
#navНАЗВАНИЕ ССЫЛКИ {
position: absolute;
left: ВЕЛИЧИНАpx;/*сдвиг влево*/
top: ВЕЛИЧИНАpx;/*положение верх низ*/
}
Отредактировано Диос (2016-01-13 15:06:26)
