Css menu position top

How TO — Fixed Menu

Step 2) Add CSS:

To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

Example

/* The navigation bar */
.navbar overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
>

/* Links inside the navbar */
.navbar a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Change background on mouse-over */
.navbar a:hover background: #ddd;
color: black;
>

/* Main content */
.main margin-top: 30px; /* Add a top margin to avoid content overlay */
>

How To Create a Fixed Bottom Menu

To create a fixed bottom menu, use position:fixed and bottom:0 :

Example

/* The navigation bar */
.navbar position: fixed; /* Set the navbar to fixed position */
bottom: 0; /* Position the navbar at the bottom of the page */
width: 100%; /* Full width */
>

/* Main content */
.main margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
>

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Источник

Css position absolute menu top

Here is my code (run the snippet to see the result): Solution: On the .bell class you have defined the left property value without a unit, for example px (See image below for reference) Simply add a unit like px or % and it should work: Question: I have a responsive single page website that contains a featured slider area plus 4 sections of content. (The menu is only visible for desktop) On scroll down once the menu is 134px from the top of the page I change the menu to become fixed so that it sits in the same place as the user views each content section (at the top of the content).

Css position absolute menu top

I am trying add notification icon, but is overflow text and dont on left.

Here is my code (run the snippet to see the result):

.dropdown < display: inline-block; cursor: pointer; border: 1px solid #fff; >.dropdown:hover < color: #e1a900; >.dropdown-content < background-color: #333333; display: none; position: relative; min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin-top: 64px; >.dropdown-content a < color: #fff; font-weight: bold; padding: 12px 12px; text-decoration: none; display: block; -o-transition:color .2s ease-out, background .3s ease-in; -ms-transition:color .2s ease-out, background .3s ease-in; -moz-transition:color .2s ease-out, background .3s ease-in; -webkit-transition:color .2s ease-out, background .3s ease-in; transition:color .2s ease-out, background .3s ease-in; >.dropdown-content a:hover .dropdown:hover .dropdown-content .bellimg < padding-top: 5px; >.bellnumbers < font-size:12px; background-color:red; width:16px; line-height: 16px; text-align: center; color:#fff; z-index: 2; border-radius: 3px; position: absolute; left: 30px; >.bell < border: 1px solid #fff; width: 48px; height: 42px; left: 30; position: absolute; >.notificationicon < position: absolute; top: 0px; right: 0px; border: 1px solid #fff; >/******************************** * Menu Styles * *********************************/ #menu < height: 64px; width: 450px; >#menu ul,#menu li < margin: 0; padding: 0; list-style: none; >#menu li < float: left; display: inline; position: relative; >#menu li a < color: #fff; font-weight: bold; -o-transition: color .2s ease-out, background .3s ease-in; -ms-transition: color .2s ease-out, background .3s ease-in; -moz-transition: color .2s ease-out, background .3s ease-in; -webkit-transition: color .2s ease-out, background .3s ease-in; transition: color .2s ease-out, background .3s ease-in; >#menu a < display: block; line-height: 35px; padding: 14px 10px 14px 5px; text-decoration: none; color: #fff; border-bottom: 1px solid #000; >#menu li:hover > a,#menu li a:hover < color: #fff; background-color: #e1a900; >#menu input < display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer; >#menu label < display: none; width: 35px; height: 36px; line-height: 36px; text-align: center; >#menu label span < font-size: 13px; position: absolute; left: 35px; >#menu ul.menus < /*background sub menus*/ height: auto; overflow: hidden; width: 180px; background-color: #333333; position: absolute; z-index: 99; display: none; border: 1px solid #000; border-top: none; color: #fff; >#menu ul.menus a < color: #fff; padding: 0px; >#menu ul.menus li < display: block; width: 100%; text-transform: none; >#menu li:hover ul.menus < display: block; border-top: 2px solid red; border-bottom: 2px solid red; >#menu a.prett < padding: 14px 19px 14px 5px; >#menu li:hover > a.prett,#menu a.prett:hover < /*DropDown list background color*/ background: #e1a900; color: #fff; >#menu a.prett::after < content: ""; width: 0; height: 0; border-width: 6px 5px; border-style: solid; border-color: #eee transparent transparent transparent; position: absolute; top: 30px; right: 4px; >#menu ul.menus a:hover < /*Dropdown menu background color*/ background: #e1a900; >@media screen and (max-width: 1000px)< #menu #menu a #menu a.prett #menu a.prett::after #menu #menu ul #menu ul.menus #menu li #menu li a #menu li a:hover #menu li:hover #menu li:hover > a.prett,#menu a.prett:hover #menu ul.menus a #menu ul.menus a:hover #menu input,#menu label #menu input #menu input:checked + label #menu input:checked ~ ul > .menu_head < width: 100%; height: 64px; background-color: #000; background-image: url("../images/menu.png"); box-shadow: 0 3px 6px rgba(0,0,0, .8); background-position: top; text-align: center; padding-left: 10px; padding-right: 10px; position: fixed; top: 0; color: #fff; z-index:1; font-weight: bold; border: 1px solid #fff; >

Welcome asd asd asd asd x3G

On the .bell class you have defined the left property value without a unit, for example px (See image below for reference)

Simply add a unit like px or % and it should work:

Nested absolute menus get cut by overflow, I am trying to create a simple floating menu with the following shape: The big menu should be with an absolute position, and so as the sub menu for each item. Also, …

Absolute menu: How to use the injector

Get the best GTA 5 online mod menuhttp://www. AbsoluteMenu .com——Apologies for the terrible mic audio, I was messing with some settings and b

ABSOLUTE MENU 1.0.9 GTA5 1.43 MOD MENU

[FREE | NEWEST VERSION] 🔥 ABSOLUTE MENU 🔥

Menu at: https://discord.gg/amzDsXWNdMIf it gets deleted just contact a owner. Menu is in #menusTags (ignore):Aboslute, Absolutemenu , Absolute Menu , FiveM …

Position Fixed / Absolute menu using jquery to sit in middle of section

I have a responsive single page website that contains a featured slider area plus 4 sections of content. I have created a floating menu that allows users to navigate to each section. On page load I want to the menu to sit positioned absolutely in the middle of the featured slider area on the left. (The menu is only visible for desktop)

On scroll down once the menu is 134px from the top of the page I change the menu to become fixed so that it sits in the same place as the user views each content section (at the top of the content).

I have created a jsfiddle with the example. http://jsfiddle.net/VZL3K/5/

Currently it breaks when I do the following:

1.Click a section in the menu so that is scrolls down, resize the browser then scroll up. The menu doesn’t stop at the middle point of the feature area.

Currently I am struggling with the logic of how this needs to be assembled.

1.Find the middle point of the featured area and set the menu position to sit there if user is at the top of the page. 2.On scroll down, check when the menu is 134px from the top and set as fixed. 3.On scroll up, if it is inside the featured content area stop when it reaches the middle point, otherwise stay at 134px.

// Menu Position $(function() < function fixedMenu() < var featureMiddleSpot = (($(".feature-slides").height()/2) - ($("#main-menu").height()/2) + ($("header").height())); if ($(document).scrollTop() < 134 ) < $("#main-menu").css(< "position" : "absolute", "top" : featureMiddleSpot >); > $(window).scroll(function() < if ($(document).scrollTop() >= featureMiddleSpot - 134) < $("#main-menu").css(< "position" : "fixed", "top" : "134px" >); > else < $("#main-menu").css(< "position" : "absolute", "top" : featureMiddleSpot >); > >); > fixedMenu(); $(window).resize(function()< fixedMenu(); >); >); 

Ok you only need to change a variable from distance1 to featureMiddleSpot

if ($(document).scrollTop() >= featureMiddleSpot - 134) < $('#main-menu').css(< 'position' : 'fixed', 'top' : '134px' >); > 

As per CoolArt’s reply, changing the variable did work, however not in Safari.

Wrapping the function in a window.load function made it work, as for some reason it wasn’t able to get the height of the .feature-slides element.

Html — css position absolute menu top, I am trying add notification icon, but is overflow text and dont on left. Here is my code (run the snippet to see the result): .dropdown < display: inline …

Align dropdown menu to the absolute right of the button despite the parent container

I have a navigation menu built using bootstrap. The menu is filled with buttons that introduce drop down menus once clicked.

Here is the navigation menu:

How can I change the following code to align the dropdown menus to the absolute right (floating right) of the selected button. Despite being contained by the parent div.

And here is what to happen when a button is clicked:

Can you offer me a solution?

The code that got me the result is as follows:

.absolute-right-dropdown-menu < position: absolute; top: 0; left: 74px; /* Note opposite values */ right: -20rem; width: 20rem; >

I added this to the dropdown-menu. Resulting in the following:

You can achieve this with CSS absolute-positioning on your .dropdown-menu, as in the code below.

See this JSFiddle for demo.

Notes

1. In Bootstrap 3, class .dropdown already has position:relative; , and .dropdown-menu is normally a descendant of .dropdown, so you can absolute-position the .dropdown-menu based on its .dropdown.
2. When you specify the width of .dropdown-menu, be sure that your specified width is not less than the min-width that will be determined by the menu’s content (e.g. in this example, 10rem is too thin). The width and right styles of .dropdown-menu should be equal and opposite values.

Источник

CSS меню

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

Горизонтальное меню

В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar < margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; >#navbar a < color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; >#navbar a:hover

Выпадающее меню

Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

#navbar ul < display: none; >#navbar li:hover ul

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar

Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul < display: none; background-color: #f90; position: absolute; top: 100%; >#navbar li:hover ul < display: block; >#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar < height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; >#navbar li < float: left; position: relative; height: 100%; >#navbar li a < display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; >#navbar ul li < float: none; >#navbar li:hover < background-color: #f90; >#navbar ul li:hover

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник