I want to make a tab style so the bottom of the tab doesn't have an underline. To do this I thought I could set bottom border color of tab and then make child menu go underneath.
I am not sure if that is possible though.
This excerpt is taken from site, it is done like this as the child menu is usually shown on hover.
body {
background-color: #000;
}
.desktop-menu {
color: #fff;
list-style: none;
}
.desktop-menu a {
color: #fff;
text-decoration: none;
}
.desktop-menu > li {
background-color: blue;
width: 60px;
margin-left: 25px;
border: 1px solid #fff;
border-bottom-color: blue;
padding: 10px;
position: relative;
z-index: 20;
}
.desktop-menu ul {
background-color: blue;
z-index: 10;
width: 200px;
display: flex;
position: absolute;
top: 100%;
left: -1px;
flex-direction: column;
list-style: none;
margin: 0;
padding: 10px 20px;
padding-top: 15px;
border: 1px solid #fff;
background-color: darkblue li;
padding-bottom: 15px;
}
.desktop-menu .has-sub:hover {
border: 1px solid #fff;
}
.desktop-menu .has-sub:hover ul {
display: flex;
}
<ul class="desktop-menu">
<li class="has-sub">Products
<ul>
<li>Product name 1</li>
<li>Prod name 2</li>
</ul>
</li>
</ul>
I am trying to remove this white line:
What is best method to achieve this?
Just a hack but it works.
.desktop-menu > li {
position: relative;
// ...
}
.desktop-menu > li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
width: 100%;
background-color: blue;
}
.desktop-menu ul {
display: none;
transform: translateY(-1px);
// ...
}
.desktop-menu .has-sub:hover ul {
display: flex;
}
See result in codesandbox.
Note: not suitable if you are working with transparent backgrounds.
Edit: updated the sandbox to proof it works with the hover effect.
Related
I'm trying to add a separator between my navigation menu(header).
So basically make it A|B|C
I tried to add this code:
This is an edit:
So my snip, from where the title and url are retrieved looks like this:
<li class="dropdown{% if link.active %} selected{% endif %}{% if submenu_type == 'menu_two_columns' %} tt-megamenu-col-02{% elsif submenu_type == 'megamenu' %} megamenu{% else %} tt-megamenu-col-01{% endif %}" {{ block.shopify_attributes }}>
{{ link.title }}
And I added this code in my theme.css
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: '';
}
.link:hover {
background-color: #aaa;
color: #000;
}
However, I am not getting the |
you set width:1px to link class so content of that class is not appears, just replace your css code
.link{
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
with
.link{
height: 40px;
width: auto;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
Try this.
ul{
overflow:hidden;
}
li{
list-style:none;
position:relative;
float:left;
padding:0 15px;
}
li:first-child{
padding-left:0;
}
li:last-child{
padding-right:0;
}
li:not(:last-child):after{
position:absolute;
border:1px solid #000;
height:100%;
content:"";
right:0;
}
li a{
text-decoration:none;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
Add your border on the left of each link:
.link {
border-left: 2px solid #fff;
}
Then add a CSS rule that cancels that border on the first link using the first-child selector:
.link:first-child {
border-left: none;
}
It's important your links are behaving like links, taking up enough space, etc. I used my own approach here, feel free to take what you like.
.menu {
background: red;
display: flex;
}
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: '';
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav class="menu">
Home
About
Contact
Blog
</nav>
Use a Horizontal rule between tags
.menu {
background: #ddd;
display: flex;
}
.link {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
hr{
margin:0px;
color:blue;
}
.link:first-child {
border-left: none;
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav class="menu">
Home<hr>
About<hr>
Contact<hr>
Blog<hr>
</nav>
Whats the catcher just place a hr tag between each link and you get the line. hr means horizontal line but since the display is set to inline block and the height is set it can be used as a vertical line
Edit
I've taken your exact updated CSS and placed a few .link anchors inside a nav container. You can see the generated content (separator bar) working as you've styled. The only thing I've changed, which doesn't affect the render, is replacing content: '' with content: none.
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: none;
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav>
A
B
C
</nav>
jsFiddle
Here's an example for you using a pseudo class to create the bar separator (|) in CSS content. This is the preferred way to handle details like this because you have more control over the content styling and positioning. I'm also using CSS negation to not add the separator after the last child. To vertically center the generated content, I've used top: 50% and a transform: translateY(-50%) to account for half the height of the actual separator.
.link{
margin: 0 5px;
background-color: #DDD;
position: relative;
}
.link:not(:last-child)::after {
content: '';
position: absolute;
display: block;
right: -10px;
top: 50%;
transform: translateY(-50%);
border-right: 2px solid #000;
height: 100%;
}
<nav>
A
B
C
</nav>
jsFiddle
I want to have a Tags input (just like the stackoverflow's one) where users can type their chosen tags and it shows inside the input.
I decided to do it inside of a ul where the input is the last li:
<ul class="tag-box">
<li class="tags" *ngFor="let tag of tags">{{tag.name}}<a class="close"></a></li>
<li class="new-tag"><input class="input-tag" type="text"></li>
</ul>
But the problem is the width of the input is always small by default while I want it to take all the remaining width:
my css:
.tag-box {
list-style: none;
padding: 3px;
margin: 0;
display: inline-block;
font-family: arial;
width: 100%;
border: 1px solid #F39F19;
border-radius: 4px;
}
.tag-box li {
padding: 4px 6px;
float: left;
display: inline-block;
}
.tag-box li.tags {
background: #F1C617;
color: #fff;
border-radius: 4px;
margin: 4px 3px;
position: relative;
}
.tag-box li .input-tag {
color: #000;
height: 24px;
vertical-align: middle;
border: none;
outline: none;
background: none;
}
Is there a way where my input my input can take whatever left of space as width according to the loop?
Here's one way you could do it, I'm adding 3 things. You'll eventually want to give it a min-width and make it wrap though.
.tag-box {
display: flex;
}
.tag-box .new-tag {
flex: 1
}
.tag-box li .input-tag {
width: 100%;
}
I'm trying to set up a little step progress bar that only has an icon for the current step. I've gotten so far as to have a default icon of sorts, but can't figure out how to clear it for non-active steps.
In the code below, I tried playing with pseudo classes but that didn't seem to work. I'm wondering if anyone can point me in the right direction. Thanks!
.step-indicator-container {
width: 600px;
margin: 100px auto;
}
.step-indicator li {
list-style-type: none;
width: 33.33%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.step-indicator li:before {
font-family: "FontAwesome";
content: "\f276";
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.step-indicator li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.step-indicator li:not(.active):nth-of-type(2) > *::before {
content: none;
}
.step-indicator li:first-child:after {
content: none;
}
.step-indicator li.active {
color: #0052e7;
}
.step-indicator li.active:before {
border-color: #0052e7;
}
.step-indicator li.active+li:after {
background-color: #0052e7;
}
For this answer, I am assuming the following is your HTML structure:
<div class="step-indicator-container">
<ul class="step-indicator">
<li></li>
<li class="active"></li>
<li></li>
</ul>
</div>
The issue is with the following declaration:
.step-indicator li:not(.active):nth-of-type(2) > *::before {
content: none;
}
This is targeting the ::before of a descendant of the li tag. However, you actually put your symbol on the ::before of the li tag itself, not a descendant. Therefore, that's what you need to be targeting. Furthermore, content: none eliminates the ::before, so you actually want content: "". Here's what I think you actually want:
.step-indicator li:not(.active)::before {
content: "";
}
And here's the full code snippet (note I replaced your symbol with the $):
.step-indicator-container {
width: 600px;
margin: 100px auto;
}
.step-indicator li {
list-style-type: none;
width: 33.33%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.step-indicator li:before {
content: "$";
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.step-indicator li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.step-indicator li:not(.active)::before {
content: "";
}
.step-indicator li:first-child:after {
content: none;
}
.step-indicator li.active {
color: #0052e7;
}
.step-indicator li.active:before {
border-color: #0052e7;
}
.step-indicator li.active+li:after {
background-color: #0052e7;
}
<div class="step-indicator-container">
<ul class="step-indicator">
<li></li>
<li class="active"></li>
<li></li>
</ul>
</div>
I've worked around a tooltip that appears in the same line where the link is located and it seems working well, best sying halfway. This tooltip is being used in a list, so it's in the same li where the link appears. The problem occurs in the next li, where the line-height seems to have been lost.
If someone could help me with this, here is the page I'm working in:
https:www.fredericopeter.com.br/playground
The damage is easily visible at the sidebar on the right side of the page.
The html code:
<ul style="margin: 2px 0 10px 20px;">
<li>Portfolio</li>
<li>Blog</li>
<li>Música</li>
<li>Video</li>
<li class="actual sidebar-tooltip">Playground<span class="txt">◄ Você está aqui</span></li>
<li style="clear: right;">Startpage [ ? ]</li>
</ul>
The css code (tooltip):
a.sidebar-tooltip:hover {
text-decoration: none;
}
a.sidebar-tooltip span {
z-index: 10;
display: none;
padding: 0;
margin-top: 0;
margin-left: 0px;
width: 100%;
text-align: right;
color: #3cbfc7;
background: transparent;
}
a.sidebar-tooltip:hover span {
display: inline;
position: absolute;
border: 0;
background: transparent;
}
.sidebar-tooltip {
width: 109px;
height: 10px;
display: inline-block;
position: relative;
border: 0;
background: transparent;
}
.sidebar-tooltip:hover .txt {
display: inline-block;
}
.sidebar-tooltip .txt {
margin-left: 3px;
color: #0a0;
width: 100%;
padding: 0;
display: none;
position: absolute;
z-index: 1000;
background: transparent;
}
.sidebar-tooltip .txt:before {
width: 0;
padding: 0;
position: absolute;
content: '';
}
You can check .sidebar-tooltip class and remove the height. I saw height is set 10px.
I have a problem with hover on this site I'm doing. The menu is ok in all pages, except the home. What is kinda awkward, 'cause I'm just using php include to change the content, and the header, menu and footer are always the same.
In Firefox and Chrome it's ok, but the problem is that when I mouseover the menu on IE9 it has a displacement, like the image:
example
http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif
I think it's something with the display: block, but I don't know how to fix it and make the menu work properly :(
Here is the HTML:
<div id="menu" class="group">
<ul>
<li id="menu-01"><span>Home</span></li>
<li id="menu-02"><span>A Empresa</span></li>
<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>
<ul class="menu-body">
<li>Teste1</li>
<li>Teste2</li>
<li>Teste3</li>
<li>Teste4</li>
<li>Teste5</li>
</ul>
</li>
<li id="menu-04"> <span>Serviços</span></li>
<li id="menu-05"><span>Projetos</span></li>
<li id="menu-06"><span>Novidades</span></li>
<li id="menu-07"><span>Contato</span></li>
<li id="menu-08"><span>E-mail</span></li>
<li id="menu-09"><span>Login</span></li>
</ul>
</div>
And the CSS:
#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
#menu ul span {
display: none;
}
#menu ul li {
list-style: none;
display: block;
float: left;
position: relative;
}
#menu li ul {
position: absolute;
display: none;
z-index: 12;
}
#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}
#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}
#menu li ul li a:hover {
background-color: #87c5f1;
height: 20px;
margin: 0;
}
#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}
#menu-01 {
left: 0px;
width: 75px;
}
#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}
#menu-02 {
left: 0px;
width: 112px;
}
#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}
#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}
#menu-04 {
left: 0px;
width: 103px;
}
#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}
#menu-05 {
left: 0px;
width: 108px;
}
#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}
#menu-06 {
left: 0px;
width: 113px;
}
#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}
#menu-07 {
left: 0px;
width: 101px;
}
#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}
.menu-head {
border-width: 0;
}
Can somebody help me?
I put your code (and modified it a bit) in a jsfiddle.
The problem, from what I see, seems to be with the 3rd element, which has a child ul.
From what I see from there, you have a problem with your CSS :
This CSS style
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
Affect this HTML element :
<ul class="menu-body">
Which you probably don't want to. (fixed here)
But I'm not sure it's your error, the code you supplied needs the images, and I do not have them...
Also, all your left:0px are useless.
If you want a better answer, you'll have to enhance your question (and/or the jsfiddle!). :-)