How can I use triangle shape css for drop-down arrow with before after.
I have created this css
<span class="arrow-top"></span>
.arrow-top {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 35px solid #943c3c;;
}
i have also created demo.
http://trianglecss.blogspot.com/2018/06/triangle-shape-with-css.html
:before and :after are CSS pseudo classes. Think of them as new tags rendered before or after the class you are targeting. So if you have a div called .dropdown you can make an arrow before or after that div without any extra markup.
HTML:
<div class="dropdown">
My Dropdown
</div>
CSS:
.dropdown::after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 35px solid #943c3c;;
}
You'll end up needing to add additional styling to this triangle to position it, but that's the start.
I'd suggest using icon library such as fontawesome,glyphicons.
It looks better for UI design.
$('.dropdown').on('click', function(){
$(this).toggleClass('show');
})
.dropdown{
position:relative;
}
.dropdown:after{
position:absolute;
content:'';
left:80px;
top:8px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid red;
}
.submenu{display:none;}
.show .submenu{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">Dropdown
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
Related
I would like to apply style to hovered links in a list, but only if there is not image inside <a> element.
The markup is like this:
<div id="leftcolumn">
<ul>
<li>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
and my css:
div#leftcolumn ul a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
I have tried this css, but to no avail:
div#leftcolumn ul a:hover < img{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Here is the jsfiddle
You cannot style an element based on it's children in CSS, what you can do is assign a special class for <a> tags that hold the image and prevent styling it:
<div id="leftcolumn">
<ul>
<li>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
div#leftcolumn ul a:not(.withImage):hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
I doubt this is possible in pure CSS.
However, you could wrap text in a <span> and only apply rules there, i.e. something like:
<div id="leftcolumn">
<ul>
<li><span>google</span></li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
CSS:
div#leftcolumn ul a:hover > span {
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Updated JSFiddle
add .non-img to li which is without img
n do css with using .non-img
div#leftcolumn ul li.non-img a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
<div id="leftcolumn">
<ul>
<li class="non-img">google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
I downloaded Bootstrap 3.0.3 (clicked the "Download Bootstrap" button from the home page) and used this code to make a login form come from a dropdown.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Register <b class="caret"></b>
<div class="dropdown-menu" style="width: 400px">
<form id="register-form" class="navbar-form navbar-left">
<!--(form goes here)-->
</form>
</div> <!-- /dropdown-menu -->
</li> <!-- /dropdown -->
<!--(here goes another dropdown)-->
</ul>
</div><!-- /navbar-collapse -->
Rounded corners only show at the bottom and I couldn't manage to make the caron appear. After a while I checked here and found out that I had a few lines missing in my Bootstrap CSS file - namely these lines:
.navbar .nav > li > .dropdown-menu::before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu::after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}
I added these lines to a second CSS. Of course they make the caron appear on the left hand side of the dropdown, but I'd like it to appear on the right. I assume there are probably a few more lines missing in my CSS (did the caron recently become obsolete for Bootstrap?).
I'd also like to correct the problem about top corners not appearing rounded.
Thanks in advance for your help.
Screenshot: http://i.stack.imgur.com/Us1oC.png
change left to right in the CSS
Change this
left: 10px;
to this
right: 10px; /*Adjust the value as per your need*/
I have this markup:
<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
<li>
<ul> // w style: border-bottom: 2px solid #aaa;
<li>
<li>
</ul>
</li>
</ul>
I need to add some style to the main parent and a touch of style that will be inherited for the same item within - as above. So i do this, but it is't work...
ul {
border-top: 2px solid #aaa;
& > {
border-bottom: 1px solid #ccc;
}
}
I know that I can duplicate tag and specify a different style for him inside, but in general is the possibility of such record/write? Thx for help.
I believe your use of the nested selector is wrong, it must be throwing errors from Sass.
You have used the direct descendent selector > after the alias for the containing selector in this case the ul, so your compiled selector would look like ul > which is invalid.
The selector should follow the pattern parent > child. You may be attempting ul > ul but the nested ul is not a direct descendent of the main ul rather it is a child of li.
Your amended code:
ul {
border-top: 2px solid #aaa;
& > li > & {
border-bottom: 1px solid #ccc;
}
}
But note this rule will also apply in the following situation too, so you should probably go for a class on the nested ul.
HTML
<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
<li>
<ul> // w style: border-bottom: 2px solid #aaa;
<li>
<ul> // Another list
<li></li>
<li></li>
</ul>
<li>
</ul>
</li>
</ul>
So this would be better
<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
<li>
<ul class='sub-list'> // w style: border-bottom: 2px solid #aaa;
<li>
<li>
</ul>
</li>
</ul>
with the following css/scss
ul {
border-top: 2px solid #aaa;
}
.sub-list { /* Will inherit the above if used on a ul */
border-bottom: 1px solid #ccc;
}
My html:
<ul class="tech">
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>PHP + MYSQL</li>
<li>C#</li>
<li class="software">PhotoShop</li>
<li class="software">Brackets</li>
<li class="software">Notepad++</li>
<li class="software">Sony Vegas</li>
<li class="software">eBay BlackThorne Pro</li>
<li class="software">Senuke XCr</li>
<li class="software2">X-Cart</li>
<li class="software2">EKM PowerShop</li>
<li class="software2">WordPress</li>
<li class="software2">phpBB</li>
</ul>
</div>
Css part of this html:
.tech ul {
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top: 10px;
list-style:none;
list-style-position:outside;
}
.tech li{
display:inline-block;
text-align: center;
background-color: #cccccc;
color: #222222;
margin: 5px 0px 5px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 3px 5px #000000;
border: #969696 1px dashed;
}
.sofware {
background-color:#646464;
color: #ff7225;
}
.sofware2 {
background-color:#4d4d4d;
color: #fd205e;
}
Problem: list items which software and sofware2 ids doesn't change color. What's the problem? Something should be like this I guess I should set those colors with "UL Li:nth-child" but I'm not sure how to do that.
Thanks in Advance
the jsfiddle says it works: http://jsfiddle.net/nLWAE/1/
<ul class="tech">
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>PHP + MYSQL</li>
<li>C#</li>
<li class="software">PhotoShop</li>
<li class="software">Brackets</li>
<li class="software">Notepad++</li>
<li class="software">Sony Vegas</li>
<li class="software">eBay BlackThorne Pro</li>
<li class="software">Senuke XCr</li>
<li class="software2">X-Cart</li>
<li class="software2">EKM PowerShop</li>
<li class="software2">WordPress</li>
<li class="software2">phpBB</li>
</ul>
.tech ul {
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top: 10px;
list-style:none;
list-style-position:outside;
}
.tech li{
display:inline-block;
text-align: center;
background-color: #cccccc;
color: #222222;
margin: 5px 0px 5px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 3px 5px #000000;
border: #969696 1px dashed;
}
.software {
background-color:#646464;
color: #ff7225;
}
.software2 {
background-color:#4d4d4d;
color: #fd205e;
}
First, your CSS selectors don't match your ids. You have "software" in the id, but "sofware" in the CSS selector. But you also have duplicate ids, which is wrong.
Change your
<li id="software"></li>
<li id="software2"></li>
to
<li class="software"></li>
<li class="software2"></li>
then change your CSS to:
.tech li.software {
background-color:#646464;
color: #ff7225;
}
.tech li.software2 {
background-color:#4d4d4d;
color: #fd205e;
}
I'm trying to lay my menu div onto facebook share div. The main problem is,that z-index doesn't work,even when i use position:relative on both div. Do You know,how i may to fix it?
P.S I added photo where You can see,what exactly goes wrong
http://img4.imageshack.us/img4/1563/problemscreenshot.png
<div id="facebook_connect">
<a href="something,something,something-thedarkside">
<img src="/img/facebook_connect.png"/>
</a>
</div>
<div id="header_menu">
<ul>
<li class="menu_link_left highlight">Strona główna</li>
<li class="menu_link_inside">O nas</li>
<li class="menu_link_inside">Usługi</li>
<li class="menu_link_right">Kontakt</li>
</ul>
</div>
and CSS code:
#facebook_connect{
height:50px;
width:20px;
top:30px;
position:relative;
z-index:1;
float:right;
}
#facebook_connect a, img{
position:relative;
z-index:1;
}
/*=======================================*/
#header_menu{
position:relative;
z-index:2;
height:30px;
width:350px;
background:#ececec;
border-radius:5px;
float:right;
top:60px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
}
So, if I'm not mistaken, what you're trying to accomplish is having your Facebook share button underneath your navigation, and I'm assuming you want it to protrude a bit from the top, giving it a somewhat layered effect.
If this is the case, the issue is not with the z-index, it is a positioning issue. You can correct this by placing the two divs within a container. Try this:
HTML:
<div id="cont">
<div id="header_menu">
<ul>
<li class="menu_link_left highlight">Strona główna</li>
<li class="menu_link_inside">O nas</li>
<li class="menu_link_inside">Usługi</li>
<li class="menu_link_right">Kontakt</li>
</ul>
</div>
<div id="facebook_connect">
<a href="something,something,something-thedarkside">
<img src="/img/facebook_connect.png"/>
</a>
</div>
</div>
CSS:
#cont {
position: relative;
top:60px;
float:right;
}
#facebook_connect{
position:absolute;
top: 5px;
right: 20px;
height:50px;
width:20px;
z-index:1;
}
#header_menu{
position: relative;
height:30px;
width:350px;
background:#ececec;
border-radius:5px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
z-index:2;
}
Then position as you see fit.