I try to make simple css-dropdownmenu.
My goal is to create a transition in which a dot transforms into a square if you hover over the main menu elements. With dot i mean a very small circle which cant be seen until hovered and then transforms into a square.
My menu is already able to transform the square into a circle with differant color but I cant think of a way to do it vice versa, especially because the circle first has to be 'hidden' until hovered.
Here is what i have so far:http://jsfiddle.net/eaqw4m38/3/
HTML:
Test
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<ul id="nav">
<li>Home</li>
<li>Menu 1
<span id="s1"></span>
<ul class="subs">
<li>Header a
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
<li>Header b
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2
<span id="s2"></span>
<ul class="subs">
<li>Header c
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
<li>Header d
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Google</li>
</ul>
</div>
</body>
I couldnt find anything via the search that fit my question.
Thanks in advance for your answers :)
Paul
EDIT: I now know how to add such a circle and make it transparent but how do i add it to the transition?
The problem is that i have to objects: 1. the square of the menuelement
2. the circle
How do I anymate the circle when the square is hovered and moreover i have to keep the font on top of the circle
Jsfiddle: http://jsfiddle.net/u2ykjdbo/
Just apply the border radius to elements at the start (when they are not hovered), and then apply the background and new color when the element is hovered while changing the border-radius to 0. As the color changes, you will see the transition from circle to square.
Code (unchanged selectors omitted):
#nav > li > a {
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
border-radius: 50%;
}
#nav > li:hover > a, #nav > a:hover {
background-color: #EC7970;
color: #000000;
border-radius: 0;
}
Related
looking for some code to wrap a li items in a div with a set height.
When list items dont fit the height it will spill over to the right.
also looking to align them to the left of that div with bullet point still visible.
would also be nice if you would be able to control the "space" in between so it doesn't look squished.
I wrote the code how i would like it displayed knowing it wont. hopefully it helps to explain what i am after.
<div>
<ul>
<li> 1</li> (space) <li> 4</li> (space) <li> 7</li>
<li> 2</li> (space) <li> 5</li> (space) <li> 8</li>
<li> 3</li> (space) <li> 6</li> (space) <li> 9</li>
</ul>
</div>
You can use column-count for this. Check snippet below..
for detail you can take reference from https://www.w3schools.com/css/css3_multiple_columns.asp
ul {
list-style: none;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
ul li {
display: block;
padding: 10px 0;
}
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
<li> 7</li>
<li> 8</li>
<li> 9</li>
</ul>
i have a hard time to create a navigation for my site where i wanted to show my menu like that:
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
and their sub menu on their relative main menu pages horizontally like that:
SubMenu 1.1 | SubMenu 1.2 | SubMenu 1.3 | SubMenu 1.4 | SubMenu 1.5 | ...
and i would like to mention here that i have a single page site that loads pages dynamically into a div with jquery ajax and those pages only contains some contents that i want to be there and there are no other extra contents or html tags like <html> <head> or <body> etc. so what i want? suppose when i click on Menu 1 and when Menu 1 loaded then their submenus like SubMenu 1.1 upto SubMenu 1.12 should be opened in that page horizontally at the same time menu 1 must remains active! please look at the picture below.
here is the code i have so far where insted of achiving this i got drop down as you can see this jsfiddle
<nav>
<ul>
<li>Menu 1
<ul>
<li>SubMenu 1.1</li>
<li>SubMenu 1.2</li>
<li>SubMenu 1.3</li>
<li>SubMenu 1.4</li>
<li>SubMenu 1.5</li>
<li>SubMenu 1.6</li>
<li>SubMenu 1.7</li>
<li>SubMenu 1.8</li>
<li>SubMenu 1.9</li>
<li>SubMenu 1.10</li>
<li>SubMenu 1.11</li>
<li>SubMenu 1.12</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>SubMenu 2.1</li>
<li>SubMenu 2.2</li>
<li>SubMenu 2.3</li>
<li>SubMenu 2.4</li>
<li>SubMenu 2.5</li>
<li>SubMenu 2.6</li>
<li>SubMenu 2.7</li>
<li>SubMenu 2.8</li>
<li>SubMenu 2.9</li>
<li>SubMenu 2.10</li>
<li>SubMenu 2.11</li>
<li>SubMenu 2.12</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>SubMenu 3.1</li>
<li>SubMenu 3.2</li>
<li>SubMenu 3.3</li>
<li>SubMenu 3.4</li>
<li>SubMenu .5</li>
<li>SubMenu 35.6</li>
<li>SubMenu 3.7</li>
<li>SubMenu 3.8</li>
<li>SubMenu 3.9</li>
<li>SubMenu 3.10</li>
<li>SubMenu 3.11</li>
<li>SubMenu 3.12</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>SubMenu 4.1</li>
<li>SubMenu 4.2</li>
<li>SubMenu 4.3</li>
<li>SubMenu 4.4</li>
<li>SubMenu 4.5</li>
<li>SubMenu 4.6</li>
<li>SubMenu 4.7</li>
<li>SubMenu 4.8</li>
<li>SubMenu 4.9</li>
<li>SubMenu 4.10</li>
<li>SubMenu 4.11</li>
<li>SubMenu 4.12</li>
</ul>
</li>
<li>Menu 5
<ul>
<li>SubMenu 5.1</li>
<li>SubMenu 5.2</li>
<li>SubMenu 5.3</li>
<li>SubMenu 5.4</li>
<li>SubMenu 5.5</li>
<li>SubMenu 5.6</li>
<li>SubMenu 5.7</li>
<li>SubMenu 5.8</li>
<li>SubMenu 5.9</li>
<li>SubMenu 5.10</li>
<li>SubMenu 5.11</li>
<li>SubMenu 5.12</li>
</ul>
</li>
</ul>
</nav>
and this is css
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li.sub:after { content:'\25ba'; float:right; vertical-align:middle; font-size:50% }
nav > ul > li { cursor:default }
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul { display:block; position:absolute; top:1.4em; left:-1px; width:8em; z-index:10 }
nav li li:hover ul{ left:8em; top:-1px }
nav li { color:black; background:#C2C2C2; border:1px solid #121314; }
nav li li { color:black; background:#C2C2C2; border-color:#696 }
nav li li li { color:black; background:#C2C2C2; border-color:#669 }
nav li:hover { background:#828282; color:#fee }
nav li li:hover { background:#828282; color:#efe }
nav li li li:hover { background:#828282; color:#eef }
nav li li { border-top-width:0 }
nav li li:first-child { border-top-width:1px }
look at this picture for more understanding!
any help is appreciated and any further detail will be provided in needed. thanks
The problem is that you had assigned a couple of positions wrong (relative and then give the li too much sizes. Also you needed to assign that the last li's will need to be display: block whilst the first ones are inline-block.
nav > ul > li {
display: block;
}
nav li li {
display: inline-block;
}
http://jsfiddle.net/filipetedim/duagvm3h/9/
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/
How can I use CSS selectors to apply a style only to the inner item in a list. Example:
HTML fragment:
<ul class="list">
<li>Item 1</li>
<li>
<ul class="list">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul class="list">
<li>Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS fragment:
ul.list {
border: 1px solid red;
}
What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.
I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:
$("li").children().eq( $("li").children().length - 1 ).
css('border', '1px solid red');
The idea is to use eq() to pinpoint the deepest child.
Hope this helps
it's not an option to specify an "ul > ul > ul.list" or similar selector.
Why not? This, or adding a class, is the solution.
You've basically specified a requirement to identify an element, then rejected all the approaches that you could use to do so.
<html>
<head>
<style type="text/css">
li.list {
border: 1px solid red;
}
</style>
</head>
<body>
<ul >
<li>Item 1</li>
<li>
<ul >
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul >
<li class="list">Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
I Hope This ma help you..
JoseSantos is correct in that it can't be done with pure CSS. Here's how I'd do it in jQuery:
$("ul").each(function(){
if ($(this).find("ul").length == 0)
$(this).addClass("list");
});