Is this menu:
<div class="navigation">
<ul id="nav-menu">
<li class="active">
<div class="sifr-r active"><span class="blue-small">01.</span><br />HOME</div>
<div class="blue-line"></div>
</li>
<li>
<div class="sifr-r"><span class="blue-small">02.</span><br />PROPERTY<br />MANAGEMENT</div>
<div class="blue-line"></div>
<ul>
<li>Rental returns</li>
<li class="last">Resources</li>
</ul>
</li>
</ul>
and sIFR:
sIFR.replace(conduititc_light, {
selector: '.sifr-r',
css: [
'a {color: #3c4a4b; text-decoration: none; margin-left: 4}',
'a .blue-small {color: #00bbd6; font-size: 8}',
'a:hover {color: #ffffff}',
'a:hover .blue-small {color: #00bbd6}',
'a.hover {color: #ffffff}'
],
wmode: 'transparent'
});
How save hover effect in sIFR while mouse point on li? Whithout sIFR it has been made with js (mootools):
var nav = $('nav-menu');
nav.getElements('.sifr-r').each(function(item) {
item.getParent().addEvents({
'mouseover': function() {
if (!item.getParent().hasClass('hover')) {
item.getParent().addClass('hover');
}
},
'mouseout': function() {
if (item.getParent().hasClass('hover')) {
item.removeClass('hover');
}
}
});
});
and CSS:
.navigation ul li.hover a.top-link {color: white}
You would need to create the hover effect in your sIFR flash file. sIFR replaces the HMTL element in the page with a Flash SWF. This SWF is not affected by CSS classes at all.
You need to replace the parent element of the <a>, such that the link itself is replaced, rather than the content of the <a> element.
That said, Flash CSS isn't very good with styling elements nested within links, and you're complicating with linebreaks and such. Perhaps a good idea not to use sIFR here.
Related
Please see below:
<span class="caption">
{block:Caption}<p>{Caption}</p><hr>{/block:Caption}
</span>
The Caption block will contain text, part of which is a link. How do I create CSS that will underline the link within the "caption" span only?
First of all - you can't have inline element around block element.
Than just do a{text-decoration: none;} .caption a{text-decoration: underline}
there is also the :not() selector to filter tags to select:
example with links and valid HTML:
li:not(.nop) a {
text-decoration:none;
}
<nav>
<ul>
<li>Lorem</li>
<li class="nop">Do not touch my underline defaut </li>
<li>Morbi</li>
<li>Praesent</li>
<li>Pellentesque</li>
</ul>
</nav>
Try jQuery:
$(document).find('span.caption').each(function(){
$(this).css('text-decoration','underline');
})
Fiddle here: https://jsfiddle.net/qq4j5uz2/
If i understand correctly it would be something like this:
.caption a{
text-decoration: underline;
}
I really hope I'm not repeating an old question - I'm new to selectors so my terminology might be lacking.
I'm working on a tabbed single-page webpage based around this Default :target with CSS solution. I would like the current tab to have its link highlighted or altered in some way, to indicate the current location.
HTML:
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">This is text you should see as you load the page</div>
<div class="tab tab2">This is text that will appear after you click on tab 2</div>
CSS:
.tab {
display:none
}
.default-tab {
display:block
}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
ul#tabnav a:hover {
background: red;
}
ul#tabnav a:target{
border-width: thick;
border-color: black;
}
It seems like my last element (a:target) doesn't do anything, even though clicking on tabs does bring me to new anchors and change the displayed content. Any suggestions?
:target is the selector for the element on the page that has the id or name of the anchor name in the URL. So ul#tabnav a:target won't match anything, but if you change the selector to a:target, it will style the 2 links you have in the middle of the page, <a id="tab1"></a><a id="tab2"></a>
To style the "active" link in your navigation you'll need to use javascript to add a class on click, then style that class.
var $links = $('#tabnav a');
$links.on('click',function(e) {
e.preventDefault();
$links.removeClass('active');
$(this).addClass('active');
})
.tab {display:none}
.default-tab {display:block}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">
This is text you should see as you load the page
</div>
<div class="tab tab2">
This is text that will appear after you click on tab 2
</div>
You can use the bootstrap tabs it will solve you problem and works fine.
Please check the demo here
Hope this will solve you problem.
Happy Coding :)
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
I have two HTML lists I need one to select my "active" class and the other to ignore it.
Here is my css, I show an image "icon-plus.gif" and when user click the li the image change to "icon-minus.gif"
li:before {content: url("icon-plus.gif");}
li.active:before {content: url("icon-minus.gif");}
And then I have a two lists, and all the li show the image "icon-plus.gif" when I click it image change.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ul>
<li>Bread</li>
<li>Apples</li>
</ul>
both are showing the images!!! Really don't understand why, my idea it was having the class inside the li:
<ul>
<li class"active">Coffee</li>
<li class"active">Milk</li>
</ul>
Code was downloaded from internet.Thanks
Use JQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("li").click(function () {
// Remove active class from all li elements
$("li").removeClass("active");
// add the active class to your clicked on element
$(this).addClass("active");
});
</script>
javascript onclick() event and jquery's css manipulation may help you. Here is a useful link:
http://api.jquery.com/category/css/
In this website:
http://theoew.uuuq.com/portfolios/Idea/
I use Cufon to style the text for the the main navigation. I have use this html code for it.
<ul id="mainnav" class="alignright">
<li class="active">
<a href="#">
<span>Home</span>
<small class="active">main page</small>
</a>
</li>
<li>
<a href="#">
<span>About</span>
<small class="active">my bio</small>
</a>
</li>
</ul>
I have one problem with it however.
When I hover over the #mainnav li span and then immediately move the mouse down so its hovering over the #mainnav li small text beneath it the #mainnav li span thinks the mouse is still on top of it and stays in its hover state. This does not happen when I don't hover over the #mainnav li small after hovering over the #mainnav li span.
I'm using this code with Cufon:
Cufon.replace('#mainnav li a span', {
hover: true,
hoverables: { span: true, small: true }
});
Its really essential that I get this fixed so I would really appreciate any help.
Note: The site is by no means finished.
hey. I did not runt the code but you could try to add the small tag into you cufon replace .....
<script type="text/javascript">
$(document).ready(function() {
Cufon.replace('h1, #mainnav li a span, #mainnav li a small', {
hover: true,
hoverables: { span: true, small: true }
});
});
</script>