A new trend in design is to, for navigation menus, show a thin line under the links and make the line thick under the link for the current page you're on. It looks like this:
How would one go about implementing this? Just CSS or JavaScript as well?
this is only a border being changed I guess.
You can always do something like this:
.menubutton{
border-bottom: 1px solid #000;
}
.menubutton:hover,
.menubutton.active{
border-bottom: 2px solid #000;
}
And add some Javascript to activate/deactivate them...
$('.menubutton').click(function (){
$('.menubutton').removeClass('active');
$(this).addClass('active');
});
Related
I am Designing & developing a website with help of a Wordpress theme. The link to the page where I am stuck is "https://8degreethemes.com/demos/?theme=eightmedi-lite". In this page in Page title bar, the title is appears in a box having light blue color and on the box right side bottom corner, a small triangle shape appears. I need to remove this triangle. I changed the bg-color of title box to the transparent but triangle did not change its color. Please help me to figure it out. I have shared a link of a screenshot with this to highlight the triangle. Also, the theme is free so you can easily download it and look all the files for the solution.
Thanks
that is the pseudeo :: after of your element
in your css file
https://8degreethemes.com/demo/8medi-lite/wp-content/themes/eightmedi-lite/style.css?ver=4.8.5
remove this block of CSS code:
h1.page-title:after, .sidebar .widget-title:after{
content: "";
border-bottom: 15px solid #70c0e8;
border-left: 15px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
It is generating because of some css. You have to check where it is coming from by developer tool in chrome or any other tool.
I have checked the demo web page and found this line css line
border-bottom: 15px solid #70c0e8;
in your style.css
Have a look
Just remove it to remove that triangle, but remember if you remove this line, it will remove that triangle from all other places where this class is referenced.
I have two HTML document, home.html and courses.html
home.html has 4 links each representing(linked) to a part of code(div) on courses.html
What I want: When a link is clicked on home.html and it is redirected to a specific part of courses.html then that part should glow (maybe by box-shadow) to attract reader's attention.
home.html(rough view)
courses.html(roughly showing effect I want)
PS: I'm just a beginner and I know only HTML, CSS, Javascript so if this effect is possible using these languages then it will be really great. If not, then pls make me understand that code.
Thanks
You can use the :target pseudo class on the intended sections in the 2nd page. Note that the anchor name (the hash after the #) is identical the target element id.
The example works on a single page, but the principle will work on 2 or more pages as well.
div:target {
border: 2px solid pink;
}
<!-- source page -->
Go to 1
Go to 2
Go to 3
Go to 4
<!-- target page -->
<div id="section1">Example 1</div>
<div id="section2">Example 2</div>
<div id="section3">Example 3</div>
<div id="section4">Example 4</div>
Well, you can use the location.hash.
When redirecting the user to the courses.html page, redirect to an URL with a hash parameter in the URL. for example: /courses.html#link1.
Then, ON the courses.html page, add this script:
$("#"+location.hash).css('box-shadow', '0 5px 5px #08c1c6');
I'm using jQuery for better readability. What it does is simple: Adds box-shadow to the element which has the ID of the URL hash parameter.
You should add an ID attribute to the divs you want to mark, and then the script will add box-shadow according to the # parameter in your URL.
Javascript version for the code:
document.getElementById(location.hash).style.boxShadow = "0 5px 5px #08c1c6";
Make the link like
home.html
Go to something
*say you want to highlight an element whose id=something
On courses.html page run a function on document ready to check for any highlights.
JQUERY:
$( document ).ready(function() {
CheckForHighlight();
});
function CheckForHighlight(){
href = window.location.href;
values = href.split('?')[1] // Remove the url
highlight = values.split('=')[1]; // Grab the second parmeter
$('#'+highlight).addClass('highlightedElem');
//highlightedElemclass has box shadow or border
}
CSS:
.highlightedElem{
box-shadow:0px 0px 10px blue;
border:1px solid blue;
}
If I understood correctly, css box shadow for a:hover is enough on this
This is css part
a:hover {
text-decoration: none;
box-shadow: 2px 2px 2px 2px red;
}
This is the html part
for a link 1
a:hover {
text-decoration: none;
box-shadow: 2px 2px 2px 2px red;
}
for a link 1
for a link 2
for a link 3
for a link 4
I am trying to find out if there is a way to alternate content line separator colors if possible.
For example:
The issue is that it has to be something automatic, so I'm assuming javascript would probably be required, but I can't find anything like this. I know there is some things that show you had to alternate if you have something like this. I say it has to automatically change because I'm using wordpress so one single line/snippet of code will be entered and something like javascript will need to automate the process. Any idea's?
You can use <hr /> elements between paragraphs as separators and style their colors with setting border CSS property.
CSS :
body{
text-align:center;
}
hr{
width:80%;
border-radius:5px;
}
hr:nth-of-type(1){
border: 4px solid red;
}
hr:nth-of-type(2){
border: 4px solid yellow;
}
hr:nth-of-type(3){
border: 4px solid green;
}
Screenshot :
Example :
JSFiddle
Here's something for starters: http://jsfiddle.net/3wGBb/
Take a look if your required browsers support nth-of-type CSS3 selector: http://caniuse.com/css-sel3.
I'm using the "ngTable" component (enter link description here) in my AngularJS app to present tabular data. It's a little simpler to use than ngGrid, and I don't like how ngGrid configures your table (I especially don't like putting the table header strings in javascript, instead of in the HTML).
Although ngTable works well enough, there appear to be some limitations in its configurability. For instance, I'd like to just add column separators to the header and cells. The way ngTable is referenced in HTML, you don't specify the table header elements, just the cells. I suppose I could put a class on the "td" elements to add separators to the cells, but that wouldn't affect the header.
Anyone got some ideas of how to do this?
You can just do that in CSS
table.ng-table thead th:not(:first-child) {
border-left: 1px solid red;
}
table.ng-table thead th:not(:last-child) {
border-right: 1px solid red;
}
table.ng-table tbody td:not(:first-child) {
border-left: 1px solid blue;
}
table.ng-table tbody td:not(:last-child) {
border-right: 1px solid blue;
}
Example here: http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview
The only downside to this approach is that it won't work in IE <9.
To get it to work on IE <9 then you would have to add classes to each column when you define the <td> and match them in css.
If you only want a border for a specific column then the css is actually easier as you can just add a class to the column you want the border on and then in your css just add a border-left or border-right for that td.col-style-name
I have an image example here of this feature that is now available in Excel 2010's spark lines:
Ideally I'd like to have a vertical line as well indicating a max/min for each row.
Any resources to this effect (I'm here to learn) would be great.
(If you just want to get it done, Google charts will be much quicker and simpler - but if you want to learn, this sounds like a pretty cool little project.)
It sounds like you are primarily having trouble with HTML/CSS.
I would stick with <div> for this, as <table> has more baggage with browsers around setting widths, borders, etc. <div> is pretty much a blank slate. I'd ignore all the extra lines in your example picture (at first, anyways) and focus on creating stacked bars of differing widths, with lines for max and min.
HTML:
<div class="row">
<div class="value">5873</div>
<div class="min">3049</div>
<div class="max">6039</div>
</div>
CSS:
div {
height: 20px; /* You'll want all of the heights to match */
}
div.value {
position: absolute; /* All of the inner divs are positioned absolute so they overlap eachother */
-moz-box-shadow: inset 0 0 10px #aaa; /* basic inset shadow for some dimension - you could make it look however u like with some work */
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
}
div.min,
div.max {
position: absolute;
text-indent: -999em;
border-right: 2px solid #000; /* This becomes the indicator for the min/max */
}
In javascript, you're going to want to set the widths of all div.value, div.max, and div.min based on what their text values are, something like:
$('div.value, div.min, div.max').each(function(){
$(this).width($(this).text() / 100);
});
I'm skipping lots of detail here, but hopefully this helps. Good luck!
How about Google Chart Tools? Looks like they have tons of options--We've used this in our projects with success (I've personally never used it though).
Here's a quick example (labels aren't quite what you're looking for but some of the examples do have inline labels):