I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:
http://css-tricks.com/triangle-breadcrumbs/
Relevant snippets:
<ul class="breadcrumb">
<li>Home</li>
</ul>
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
However, I'm using it as a directed flow, something like:
Main_Category >> Sub_Category >> Details
This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.
My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:
<li>Home</li>
But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.
If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.
Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.
<ul class="breadcrumb">
<li>Home</li>
</ul>
And in CSS:
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a.color-0:after {
background: black;
}
.breadcrumb li a.color-1:after {
background: blue;
}
I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.
Simply change your code to:
<li>Home</li>
Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:
<li>Home</li>
Some sample css, now you can set the before and after as you please:
.breadcrumb-color li a {
background: red;
}
.breadcrumb-color li a:after {
background: red;
}
ng-class should work for what you are trying to do.
<li>Home</li>
rough code example
Related
#I edit the question:#
I have attached the html:
<div class="mainDiv">
<ul id="myUL">
<li id="li-1" class="myLI"></li>
<li id="li-2" class="myLI"></li>
<li id="li-2.1" class="myLI"></li>
<li id="li-2.2" class="myLI"></li>
</ul>
</div>
My UL is formatted dynamically, based on what comes back from the DB.
#-------------------------#
I have a UL, in which all the LIs within it are linked by an arrow.
In addition, I have LIs that consist of several LIs that are their subcategory, and when clicked on, the LIs subcategory - will go from dispaly: none mode, to display: inline-block mode.
My problem is when I have an LI that consists of several LIs, but is located at the end of the UL.
According to my CSS, after this LI, an arrow will appear, because basically, there is another LI in UL, it is just doesn't appear...
I have attached a picture that illustrates this.
As long as the LI that contains some LI is in the middle of the UL- everything is fine (like example A).
Once it's at the end of the UL (as in example B), I have an "unnecessary" arrow, which I would like not to show now, but only when my all LI are in display: inline-block.
I also attached my CSS.
ul#myUL {
list-style: none;
margin:auto;
}
li.myLI {
display:inline-block;
xpadding: 10px 25px;
xborder: 1px solid black;
margin: 0 25px;
position: relative;
}
li.myLI:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li.myLI:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}
div.mainDiv {
display:flex;
width:60%;
margin: auto;
border: 3px solid #73AD21;
}
I will really appreciate your help to resolve this.
Thanks!
I am styling a hovered anchor by applying content with the :after pseudo attribute, which adds a border underneath:
a:hover {
position: relative; }
a:hover:after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid #a5cf4c;
margin-top: 0.5em; }
This works fine, but there are also some anchors around images, and I don't want the border under them. For CSS this would only work with the non-existent parent selector a:after < img. I tried solving it with jQuery, but
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. See Access the css ":after" selector with jQuery.
I looked some solutions on SO without the parent hurdle, but I can't get anywhere with this. Anyone?
You could add the after with a class.
$('a:not(:has(img))').addClass('after-affect');
a:hover {
position: relative;
}
a.after-affect:hover:after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid #a5cf4c;
margin-top: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Anchor with text -->
test
<!-- Anchor with image -->
<a href="#">
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/>
</a>
I am using ddlevelsmenu.js from dynamic drive to display menu items on mouseover. everything works fine. just i have one very long list which appears little bit odd. Can i split the list items into different columns?
Below are my HTML codes followed by CSS codes:
<ul>
<li>Indian States</li>
</ul>
The above codes will trigger the below list items on mouseover
<ul id="stts" class="submenustyle">
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal pradesh</li>
<li>Jammu Kashmir</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Srinagar</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
<li>Uttaranchal</li>
<li>West Bengal</li>
</ul>
Below are the css codes
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 1.2vw;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 180px; /*width of menu (not including side paddings)*/
color: white;
background-color:#999999;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
.ddsubmenustyle li a:hover{
background-color:#333333;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 180px; /*width of menu (include side paddings of LI A*/
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
have you tried setting widths on the li?
ul{
width:800px;
}
li{
width: 40%;
display: inline-block;
}
this was already answered here: How to display an unordered list in two columns? by Gabriel. Following css should resolve your issue:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
I have created jsfiddle to test it and it works nicely. Have a look http://jsfiddle.net/tralala/jg0zycfw/1/.
please take a look at JSFiddle example.
I want to make menu with closing 'x' on it's right side. Menu pops-up after click on green div.
HTML
<div class="field">
<nav id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Item 3</li>
</ul>
<div class="close">X</div>
</nav>
CSS
.field {
background: green;
width: 350px;
height: 200px;
margin: 10px auto;
position: relative;
cursor: pointer;
}
#menu {
position: absolute;
display: none;
}
#menu ul {
width: 80%;
border: 1px solid #999;
float: left;
}
#menu li {
background: #fff;
padding: 5% 15%;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #999;
white-space: nowrap;
}
#menu .close {
background: #ccc;
width: 20%;
padding: 5%;
float: right;
}
JS
(JS is messy, I wrote it on quickly)
$('.field').on('click', function (e) {
var $pointer = $('#pointer'),
$menu = $('#menu'),
parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top,
circleX = relX - ($pointer.outerWidth() / 2) + 1,
circleY = relY - ($pointer.outerHeight() / 2) + 1;
$pointer.css('left', circleX);
$pointer.css('top', circleY);
$pointer.show();
$menu.css('left', circleX + $pointer.outerWidth());
$menu.css('top', circleY);
$menu.show();
$menu.one('click', '.close', function (e) {
$menu.hide();
$pointer.hide();
e.stopPropagation();
});
});
There are 2 issues:
li items doesn't overflow properly text inside them;
[x] element is under menu and not on its right side;
I tried different combinations suggested in other, similar questions but nothing works or I'm to tired and I missed something.
Important thing is that there should not be any hard coded values. Properly values are only %. That's because it should look good on different borwser sizes.
Any ideas how to fix those issues?
You should take a look at the CSS Box model. Padding, border and margin are always added to the width/height of the element and are not included in the width you define. Your floating X is jumping down, because there are no more 20% space left on the right side of the ul.
Better place the X outside of your div. You can also leave out all the floats. Set position: absolute on div.close and move it outside the boundary of the container using left: 100%.
#menu {
position: absolute;
display: none;
}
#menu ul {
border: 1px solid #999;
}
#menu li {
background: #fff;
padding: 5% 15%;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #999;
}
#menu .close {
background: #ccc;
width: 20%;
padding: 5%;
position: absolute;
top: 0;
left: 100%;
}
By the way, white-space: nowrap leads to your menu elements' texts being out of the boundary of the li, which is not very flexible.
The navigation menu at the top of the http://www.playframework.org site features a small arrow pointing upward for the currently selected section (Home, Learn, Download,...). I tried to get behind the implementation they used, but I can't wrap my head around it - the resource does not show up in Chrome's Resources window, and an inspection of the elements did not show any signs of a background image, nor a JS interceptor (although I might have missed that). What in hellhound's name is going on there? :)
This is the HTML:
<ul id="menu">
<li class="selected">
Home<span>></span>
</li>
...
And the magic happens in this piece of CSS:
#menu .selected a:after {
content: " .";
display: block;
text-indent: -99em;
border-bottom: 0.8em solid #8adc92;
border-left: 0.8em solid transparent;
border-right: 0.8em solid transparent;
border-top: none;
height: 0px;
margin-left: -.8em;
margin-right: auto;
margin-top: 14px;
position: absolute;
left: 50%;
width: 1px;
}
The technique is called CSS arrows, you can find a lot of articles and examples on the net
(EDIT: #jeroen posted a very good one).
It looks like they used a css arrow, see more information here.
Here's a link to see it in action
http://jsfiddle.net/zC5cp/
.box{
background: red;
color: #FFF;
width: 100px;
height: 100px;
position:relative;
}
.arrow-up {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
position: absolute;
bottom: 0px;
margin-left: -10px;
left:50%;
}