iam trying to do a top menu with the width of the background color to 100%.
and keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: http://jsfiddle.net/NnCVv/246/
html:
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
CSS
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
Try this
<!DOCTYPE html>
<html>
<head>
<style>
*
{
padding: 0px;
margin: 0px;
}
#banner
{
width:100%;
background-color:green;
}
#wrap1
{
background-color:black;
width: 960px;
}
#wrap
{
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="banner">
<div id="wrap1">
<ul id="wrap">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
</body>
</html>
Related
there are navigation panel(div id=#nav) in which is located horizontal menu(nav_main_ul). It has submenu. When I load site main horizontal is appear but on hover submenu of main manu is not appear.
I write:
.nav_main_ul li a:hover .submenu{
top:150;
}
What is wrong?
Everything did work while I use flexbox for sidebar, content and footer.
I'm newbie in html and css. I think reason of failure is conflict between position(absolute, relative) and flexbox.
Thanks in advance.
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
/*.nav_main_ul li a:hover .submenu{
top:50;
}*/
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>
Edit
Hi Delphi - To answer your question about the + selector, let's take a look at your HTML markup:
<li>
Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
We need to understand that in the above markup, we can express it as:
LI (Parent / Root)
- A (Child of LI, Sibling of UL)
- UL (Child of LI, Sibling of A)
- LI (Child of UL, Grand-Child of LI)
Your desired action is that when a user hovers over the A, we show the UL.
USUALLY with CSS, we think of NESTED (or PARENT/CHILD) use-cases. But in YOUR use case, the A and UL are NOT in a parent/child relationship. Rather, they are siblings.
So, what we want is: When a user hovers over the A, we want the SIBLING(s) of A (in this case, only UL) to have TOP: 50PX.
There are TWO sibling selectors in CSS, "Adjacent" and "General". Adjacent means that it will ONLY apply when the siblings are directly together. For example:
<div>
<p></p>
<span></span>
<span></span>
<p></p>
</div>
OR:
DIV
- P
- SPAN
- SPAN
- P
Let's assume in the above, we wanted to select every SPAN that is a SIBLING of P. If we did:
p + span { color : red }
Only the FIRST span would be applied. That's because, it's the only span that immediately is next to a P element. Demo: http://jsfiddle.net/ucq5pg13/
What if we wanted ALL spans following a P to be red? That's where our GENERAL sibling selector comes into play:
p ~ span { color: red }
What this says is that ANY span that's a SIBLING of P, that comes AFTER IT, will be red.
It's important to note that it MUST come after. For example:
p ~ span { color: red }
<div>
<span></span> <!-- I WOULD NOT BE RED -->
<p></p>
<span></span> <!-- I WOULD BE RED -->
<span></span> <!-- I WOULD BE RED -->
<p></p>
</div>
Demo: http://jsfiddle.net/kb7n5236/
Hopefully that helps :)
Original:
When you hover over the a link, you'll need to position the .submenu. You can do something like:
<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
JSFiddle: http://jsfiddle.net/1us0q4m3/1/
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>
Is there a way to make medium.com like Navbar that can be scroll horizontally in touch devices. The best the way if there is no js is requier because I need it clean with css.
Here is how far I've got. But there is a scroll bar appearing in desktop browsers while the medium.com's navbar is not.
ul {
width: 300px;
list-style: none;
overflow-y: auto;
white-space: nowrap;
}
ul li {
display: inline;
padding: 10px;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>International</li>
<li>Political</li>
<li>TV News</li>
<li>About</li>
<li>Contact</li>
</ul>
JSFiddle
You need to use overflow-x.
CODEPEN
Add this between your tags. This is for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS
ul {
width: 300px;
list-style: none;
overflow-x: auto;
white-space: nowrap;
background-color: #000;
padding: 20px 10px;
}
ul li {
display: inline;
padding: 10px;
color: #fff;
}
#media screen and (min-width: 768px) {
ul {
display: none;
}
}
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
ul {
list-style: none;
padding: 10px;
width: 100%;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
overflow-y:hidden;
overflow-x: scroll;
display:inline-flex;
}
ul li {
display: inline-block;
padding: 5px;
}
ul li a{
text-decoration: none;
color: gray;
}
ul li a:hover{
color: black;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>International</li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Home</li>
<li>News</li>
<li>Home</li>
<li>News</li>
</ul>
I have a navigation menu, and the last item contains a search input field. I would like the input field to be responsive, so that I can resize the window and avoid a menu line break at any cost.
I don't want to use media queries, since the menu will eventually be in a wordpress theme, so the items will be dynamic (different amounts of items, and different length of words). Of course at some stage the menu will break if there are too many items, but I would have still liked to find a solution to have a min-/max width for the input search field.
I am not sure if this is even possible. If not, are there any alternative solutions?
http://jsfiddle.net/aobrien/271vx59d/
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>
<form method="get" class="search-form2" action="/" >
<input type="search"placeholder="Search" />
</form>
</li>
</ul>
</div>
css:
.menu {
color:#FFF;
width:100%;
background:#000;
}
.menu > ul {
display: inline-block;
width:100%;
padding:5px 0;
margin:0;
}
.menu > ul > li {
list-style:inside none;
float:left;
border-right:1px solid #FFF;
padding: 0 5px;
}
.menu > ul > li:last-child{
float:right;
overflow:hidden;
border-right:none;
}
input {
width: 100%;
max-width: 400px;
}
I would like the input field to be responsive, so that I can resize the window and avoid a menu line break at any cost.
You can remove the float and use display: table-cell and white-space: nowrap on the <li> elements like this:
http://jsfiddle.net/271vx59d/7/
.menu {
color: #FFF;
width: 100%;
background: #000;
}
.menu > ul {
display: table;
width: 100%;
padding: 5px 0;
margin: 0;
}
.menu > ul > li {
list-style: inside none;
border-right: 1px solid #FFF;
padding: 0 5px;
display: table-cell;
white-space: nowrap;
}
.menu > ul > li:last-child {
overflow: hidden;
border-right: none;
text-align: right;
}
input {
width: 100%;
max-width: 400px;
}
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>
<form method="get" class="search-form2" action="/">
<input type="search" placeholder="Search" />
</form>
</li>
</ul>
</div>
I am trying to make a top menu which should be 100% filled with background-color and also keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: JSFiddle
HTML:
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
CSS:
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
Try this
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 100%;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
width:11%;
}
ul li a {
display: block;
padding-top: 20%;
padding-bottom: 20%;
color: white;
text-decoration: none;
}
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
Add a section as wrapper around it. And since you might want to re-use your wrap declare it as class.
CSS:
#header {
background: navy;
}
.wrap {
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul {
overflow: hidden;
}
HTML:
<section id="header">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
</section>
JSFiddle
I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:
<div id="navMain">
<ul>
<li>Forside
<ul>
<li>1111111111111</li>
<li>Link 1-2</li>
<!-- etc. -->
</ul>
</li>
<li>Om Os
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<!-- etc. -->
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.
So how would i make all li in each inner ul the same size as the widest one?
Here you can find the CSS if needed.
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}
<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li>Forside
<ul class="menu">
<li>1111111111111</li>
<li>Link 1-2</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
</ul>
</li>
<li>Om Os
<ul class="menu">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul class="menu">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
li {display:block} will make the list items as wide as the widest item in that parent container
body {
background: #ededed;
margin: 0 auto;
}
.wrapper {
width: 720px;
border: 1px solid red;
padding: 5px;
}
.menu {
padding: 0;
margin: 0;
width: 100%;
border-bottom: 0;
}
.menu li {
display: table-cell;
width: 1%;
float: none;
border: 1px solid green;
margin: 2px;
padding: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>