We Keep Coding

Trying to style a Sidebar Widget Navigation with JQuery

For the navigational items which have a submenu, for example, 'Primary Fees', I have included an arrow. Now when I hover over the Main Menu Item, I have included an animation which rotates the arrow and highlights the Main Menu item with red. In order to rotate the arrow, I added a .rotateOnHover class to all the Main Menu Items which have the arrow. then I use CSS to perform the rotation animation.
Now to the problem. When I hover over the submenu Items, I want to keep that particular Main Menu item highlighted and keep the arrow rotated. For example, when I hover over 'Grade 1-3 Boarding', I want to keep 'Primary Fees' highlighted and I want to keep the arrow rotated. I did some searching on the interwebs, and in particular StackOverflow, and I was encouraged to use Jquery to achieve this task. Since this is in essence, hovering over a child element and changing the style of its parent element.
The problem is when I hover over the submenu items e.g. 'Grade 1-3 Boarding', it applies the rotating arrow animation to ALL the main menu items which have the same arrow and arrow class, .rotateOnHover.
How can I hover over a submenu item and apply my desired hover effects to its parent Menu Item Only and not all the menu items?
Any help will be appreciated.
Also, any styling tips for the sidebar and the website, in general, will be appreciated. This is my very first website and I'm learning on the job.
This is the code for the sidebar
HTML
<div class="sidebar-widget">
<div class="sidebarExplore">
<h4>
<span style="color: grey; text-align: center; margin:auto; display:block; font-size: 25px;">
<i class="fa fa-globe" aria-hidden="true"></i> Explore This Section</span>
</h4>
</div>
<ul class="sidebarExploreList">
<li class="dropdownsidebaritem">
Primary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i>
<div class="sidebarExploreSubmenu" style="font-size: 12px;">
Grade 1 - 3 - Boarding
Grade 4 - 7 - Boarding
Other Costs - Boarding
Reception - Day School
Grade 1 - 3 - Day School
Grade 4 - 7 - Day School
Other Costs - Day School
</div>
</li>
<li class="dropdownsidebaritem">Secondary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></li>
<li>Admission Forms</li>
<li>School Fee Policy</li>
</ul>
</div>
CSS
.sidebar-widget {
border:1px solid #afb1b3;
margin-top: 13.8%;
margin-right: 5%;
overflow: hidden;
background-color: #f3f3f3;
float: right;
width: 20%;
height: auto;
}
.sidebar-widget ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-widget ul li {
list-style-type: none;
width: 100%;
border-top: 1px solid black;
}
.sidebar-widget ul li:last-child{
list-style-type: none;
width: 100%;
border-bottom: 1px solid black;
}
.sidebar-widget ul li a{
display: block;
position: relative;
text-decoration: none;
text-align: center;
padding: 20px;
font-size: 18px;
font-weight: 100;
text-rendering: optimizeLegibility;
}
.sidebarExploreSubmenu{
display: none;
position: relative;
color: black;
background-color:white;
font-size: 11px;
border-bottom: 0.5px solid bisque;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.sidebarExploreSubmenu a{
padding: 10px;
text-decoration: none;
display: block;
text-align: center;
font-size: 10px;
}
.rotateOnHover {
font-size:18px;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sidebar-widget a:hover {
background-color: #990000;
color: white;
}
.dropdownsidebaritem a:hover .rotateOnHover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.sidebarExploreSubmenu a:hover{
font-size: 10px;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$( '.dropdownsidebaritem' ).hover(
function(){
$(this).children('.sidebarExploreSubmenu')
.delay(100)
.slideDown(500);
},
function(){
$(this).children('.sidebarExploreSubmenu')
.clearQueue()
.slideUp(500);
}
);
});
$(function() {
$('.sidebarExploreSubmenu a').hover(function() {
$('.rotateOnHover').css('transform', 'rotate(180deg)');
}, function() {
// on mouseout, reset the transform
$('.rotateOnHover').css('transform', '');
});
});
</script>

First of all don't style inline elements, example:
Grade 4 - 7 - Day School
instead make it like that:
Grade 4 - 7 - Day School
and then in style.css add:
.sidebarExploreSubmenu-anchor {
font-size: 15px; font-weight:bold; padding: 5px; }
It can make your website messy. Try to do everything in style.css, remember that there're levels in which browser are reading styles, example:
!important > inline styles > #style .style .style > .style .style > .style

No Scroll bar appears when I run my site through a browser with my slide out menu position set to fixed

I have just started coding websites. I just recently started a website for a friend and though it would be cool to have a slide out menu that slide out from the top rather than the left or right of the page. However having done so and got it to work and all then having added some other content to the page have found that I am unable to get a scroll bar when processed through a browser. I have tried in the body tag, "overflow;scroll" which did not work and I have tried adding a div with the height of 3000px
Pls if anyone can help that will be great I will attach all my css and html (take note there is some jQuery and java)
Thanks
HTML & Java
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Site</title>
<link rel="stylesheet" type="text/css" href="../CSS/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../jQuery/jquery.cycle2.min.js"></script>
<script src="../jQuery/jquery.cycle2.video.js"></script>
<script src="../jQuery/jquery.cycle2.carousel.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--Skeleton for Slide out Menu-->
<body class="menu menu-open">
<header>
<nav class="menu-side">
<!--Content for Menu Side-->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo"><img src="../../Assets/Josh-Logo.png" alt="Josh Meyers"></li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<!--End of Content for Menu Side-->
</nav>
</header>
<!--End of Skeleton for Slide out Menu-->
<!--Button to Toggle "Menu Side"-->
<img src="../../Assets/top-menu-icon.png" width="50px" height="50px" alt=""/>
<!--End of Button to Toggle "Menu Side"-->
<!--Josh Meyers about and Title-->
<div id="Josh-Meyers">
<h1>Josh Meyers</h1>
<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.[1]
Typically, a lens is used to focus the light reflected or emitted from objects into a real image on the light-sensitive surface inside a camera during a timed exposure. With an electronic image sensor, this produces an electrical charge at each pixel, which is electronically processed and stored in a digital image file for subsequent display or processing. The result with photographic emulsion is an invisible latent image, which is later chemically "developed" into a visible image, either negative or positive depending on the purpose of the photographic material and the method of processing. A negative image on film is traditionally used to photographically create a positive image on a paper base, known as a print, either by using an enlarger or by contact printing.
</p>
</div>
<!--Responsive Video Slider and Title-->
<div id="Recent-Projects">
<h1>Recent Projects</h1>
</div>
<div id="video-wrapper">
<span class="cycle-prev">&#9001</span>
<span class="cycle-next">&#9002</span>
<div class="cycle-slideshow"
data-cycle-carousel-visible="3"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-auto-height="640:360"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next"
data-cycle-slides=">iframe"
data-cycle-youtube="true"
data-cycle-youtube-autostart="true"
data-cycle-pager=".cycle-pager"
data-cycle-carousel-fluid="true"
>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7TccWhZ6T8c?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VPuKbzP2KNM?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DHW0hQHLpTc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cycle-pager"></div>
</div>
<!--End Responsive Video Slider and Title-->
<script>
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open', 'toggle-open');
return false;
});
})();
</script>
CSS
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
overflow:hidden;
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}
.menu-open {
top:231px;
}
.menu-open .menu-side {
top:0px;
}
.menu-side {
background-color:#333;
border-bottom:1px solid #000;
color:#fff;
position:fixed;
top:-231px;
left:0px;
width: 100%;
max-width:100%;
height: 210px;
padding: 10px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}
.menu-toggle {
position:relative;
display:block;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
top:-23.5px;
}
/*Content style for Menu Side*/
.menu-side ul {
width:800px;
max-width:100%;
height:100px;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-color:white;
border-width:thick;
-moz-box-shadow:20px 20px 20px 10px black;
-webkit-box-shadow:10px 10px 10px 10px 10px black;
box-shadow:1px 1px 20px 0.5px black;
}
.menu-side li {
margin-top:auto;
margin-bottom:auto;
padding:10px;
display:inline-block;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:18px;
font-style:italic;
}
/*Style for Josh Meyers About*/
#Josh-Meyers h1 {
text-align:center;
color:#FFF;
}
#Josh-Meyers p {
color:#FFF;
}
/*Style for Video Slide Show and Title*/
#Recent-Projects {
text-align:center;
height:40px;
width:100%;
max-width:100%;
}
#Recent-Projects h1 {
text-align:center;
color:#FFF;
}
iframe {max-width:100%}
#video-wrapper {
width:100%;
max-width:100%;
height:400px;
margin-top:5px;
}
.cycle-slideshow {
width:100%;
top:2%;
margin-left:auto;
max-width:90%;
margin-right:auto;
}
.cycle-prev, .cycle-next {
font-size:40px;
font-weight:bold;
color:#FFF;
display:block;
position:absolute;
top:60%;
z-index:999;
cursor:pointer;
}
.cycle-prev {left:2%;}
.cycle-next {right:2%;}
.cycle-pager {
text-align: center; width: 100%; z-index: 999; position: absolute; overflow: hidden; top:85%
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
iframe {
padding-left:5px;
padding-right:5px;
}

You're on the right way. In your .menu you should remove your : overflow: hidden;
Because you put the .menu class within your body the html will hide everything beneath it.
Check out the [JSFiddle]
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}`

In the .menu class in the CSS change the overflow:hidden to overflow:scroll

JavaScript or CSS: How can I make a transition of one element to another?

I'm working on my custom home page and I'd like to make a transition of one element to another.
Here's my HTML code:
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
CSS:
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
As you can see, I've two ul tag and what I want is to do a transition of the first ul to the other ul: http://prntscr.com/7ftax4 and the second ul: http://prntscr.com/7ftba6
The idea would be that the first ul is displayed and after 10 seconds, second ul passes over the first ul.
How can I do it with JavaScript or CSS please?

Here is a piece of jQuery which will successively add an active class over the <ul> elements. Then using CSS the <ul> elements can be hidden and shown when the .active class is applied
$(function(){
$('#index-features ul').first().addClass('active');
setInterval(loop,10000);
function loop(){
var $active=$('ul.active');
var $next=$active.nextAll('ul').first();
if($next.length===0)$next=$active.prevAll('ul').last();
$active.removeClass('active')
$next.addClass('active');
}
});
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
#index-features ul {
position: absolute;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
#index-features ul.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>

This can be done with pure CSS, but you need animation and animation delay. I have made a fiddle where one div will be covered by another div after 10 seconds so be patient: http://jsfiddle.net/Lcek5s21/
#number1, #number2 {
height:100px;
width: 100px;
}
#number1 {
background-color:red;
}
#number2 {
background-color:green;
-webkit-animation: mymove 3s infinite;/* Chrome, Safari, Opera */
-webkit-animation-delay: 10s;/* Chrome, Safari, Opera */
animation: mymove 3s infinite;
animation-delay: 10s;
position:relative;
opacity:0;
}
#-webkit-keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}

Need a curved vertical line using HTML and CSS

I need a curved vertical line with 5 dots like this -
On hovering over each dot, text should slide besdide it from left to right, and text should disappear on taking away the mouse.
So far I have only been able to indent and place those 5 dots by means of modifying margin-leftproperty for each item in the list. I am not able to get the curved line. How do I achieve that?

Background:
Border-radius is really great for creating the appearance of curves. The problem is that anything inside an container which is curved using this style ignores said curving. As you pointed out, we need to use margins. However, by keeping everything symmetric, we can keep the margin-lefts to three sets, one of which doesn't require a class.
Answer:
We can get away with a very simple structure here:
<ul>
<li><span>Text</span></li>
</ul>
We have the ul as the outer wrapper with the top and bottom horizontal borders. We use a ::before pseudo-element attached to the wrapper, to create the curved line. Each li is the menu entry. The blue circles are created with ::before pseudo-elements attached to the li, and we can achieve the text animation via the span inside. We could get away with not having a span, but we'd need to declare the actual text content in the CSS, and I think it belongs in the HTML.
The CSS isn't too bad. We curve the ul::before and give it the border. We make it larger than 100% because the curve you show cuts off the top and bottom.
Screenshot:
Code:
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-18%;
left:10px;
content:"";
}
li {
margin:28px 0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.right {
margin-left:30px;
}
li.middle {
margin-left:6px;
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="right"><span>Anecdotes</span></li>
<li class="middle"><span>Interviews</span></li>
<li><span>Records</span></li>
<li class="middle"><span>Recent Stats</span></li>
<li class="right"><span>Recent Snaps</span></li>
</ul>
Success! As mentioned, this might be better using Canvas, or possible SVG. But if you want to stay strictly with HTML & CSS, this should help.
Second Method
Another way we can do this, staying with HTML & CSS, is to use transform:translate. I thought this might be easier and more reliable, but it turns out it requires more CSS and more classes. However, I got it working so I'm going to post it here anyway, because despite that it's pretty cool I think.
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-17.5%;
left:10px;
content:"";
}
li {
margin:0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
line-height:30px;
margin-top:-15px;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.one {
transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg);
}
li.two {
transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg);
}
li.three {
transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg);
}
li.four {
transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg);
}
li.five {
transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg)
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="one"><span>Anecdotes</span></li>
<li class="two"><span>Interviews</span></li>
<li class="three"><span>Records</span></li>
<li class="four"><span>Recent Stats</span></li>
<li class="five"><span>Recent Snaps</span></li>
</ul>

Here's how you can achieve the curve, dots, and text display below. You have to adjust it to suit your need.
#arch {
border-left: solid 2px black;
border-radius: 50%;
height: 500px;
width: 300px;
margin-left: 100px;
padding-top: 100px;
margin-top: -80px;
}
#arch-outer {
/* serves as a blade to cut off overly curved area */
height: 450px;
width: 300px;
overflow: hidden;
/* Cuts off the overly cured area */
}
#arch li {
font-size: 76px;
height: 85px;
color: rgb(153, 217, 234);
}
#arch li:nth-of-type(1) {
margin-left: 20px;
}
#arch li:nth-of-type(4) {
margin-left: 15px;
}
#arch li:nth-of-type(5) {
margin-left: 40px;
}
#arch li a {
font-size: 20px;
line-height: 76px;
vertical-align: middle;
color: rgb(153, 217, 234);
}
<div id="arch-outer">
<div id="arch">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li>Four
</li>
<li>Five
</li>
<ul>
</div>
<!-- End arch -->
</div>
<!-- End arch outer -->
View on jsfiddle

You can create 1 blank <div class="curve"></div> and display only left border of that div as below:
.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}
OR else
create 1 curve image and apply to that background div and with help of position float your dot div on it and with hover effect show your text.
check here http://jsfiddle.net/Lz97rgyf/2/

Jquery: Add class to every second visible element

I'm trying to create a dynamic portfolio gallery where you can hide show items by clicking categories. Everything works apart from adding a class to elements hidden/showing when categories are clicked.
I currently have:
$(document).ready(function() {
$('ul.filter a').click(function() {
$(this).css('outline','none');
$('ul.filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('div.portfolio .hidden').fadeIn('slow').removeClass('hidden');
} else {
$('div.portfolio').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden').addClass("show");
$('.portfolio:visible').each(function (i) {
if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
});
}
});
}
return false;
});
});
It's this part of the code that seems to have the problem:
$('.portfolio:visible').each(function (i) {
if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
});
Basically, I'm looking to add the class .last to every second "visible" item in my portfolio list.
Anyone?
CSS
/* -------------- Portfolio List ---------------- */
#portfolio-items {
font-size: 11px;
}
#portfolio-items ul, #portfolio-items li {
list-style:none;
}
#portfolio-items .portfolio {
float:left;
width:265px;
height:145px;
margin:0px 60px 50px 0px;
display:block;
}
#portfolio-items .portfolio .portfolio-client {
float:left;
font-size: 11px;
color: #666;
text-decoration: none;
}
#portfolio-items .portfolio.last {
margin-right:0px;
}
#portfolio-items .portfolio img {
border:solid 6px #fff;
-moz-box-shadow: 1px 1px 3px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #999; /* Safari, Chrome */
box-shadow: 1px 1px 3px #999; /* CSS3 */
margin: 0px 0px 5px;
transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-o-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-webkit-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-moz-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
transform-origin: centre; /* in Safari, the origin for transformation */
-o-transform-origin: centre; /* in Firefox, the origin for transformation */
-webkit-transform-origin: centre; /* in Safari, the origin for transformation */
-moz-transform-origin: centre; /* in Firefox, the origin for transformation */
}
#portfolio-items .portfolio img:hover {
-moz-box-shadow: 1px 1px 6px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 6px #999; /* Safari, Chrome */
box-shadow: 1px 1px 6px #999; /* CSS3 */
transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
box-shadow: 0px 0px 20px #ccc;
-o-box-shadow: 0px 0px 20px #ccc;
-webkit-box-shadow: 0px 0px 20px #ccc;
-moz-box-shadow: 0px 0px 20px #ccc;
}
.view-project {
background: url(/themes/cogo/default_site/images/view-project.png) no-repeat right center;
display: block;
float: right;
height: 14px;
width: 87px;
padding-right: 20px;
text-align: right;
}
HTML
<div id="portfolio-items">
<div class="portfolio first cms content-management e-commerce clothing kids shops toys">
<a href="http://ee.dev/portfolio/detail/be-my-bear">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/bemybear-project-254x139.jpg" width="254" height="139" title="Be My Bear" />
</a>
Be My Bear
<span>View Project</span></div>
<div class="portfolio last cms content-management business-services">
<a href="http://ee.dev/portfolio/detail/joloda">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/joloda1-254x139.jpg" width="254" height="139" title="Joloda International Ltd" />
</a>
Joloda International
<span>View Project</span></div>
<div class="portfolio first buddypress cms content-management wordpress business-services coaching events training">
<a href="http://ee.dev/portfolio/detail/nwwn">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/nwwn-project-254x139.jpg" width="254" height="139" title="NWWN" />
</a>
North Wales Women’s Network
<span>View Project</span></div>
<div class="portfolio last e-commerce jewellery shops">
<a href="http://ee.dev/portfolio/detail/italian-world">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/italianworld-254x139.jpg" width="254" height="139" title="Italian World" />
</a>
Italian World
<span>View Project</span></div>
<div class="portfolio first cms content-management drupal designers printers">
<a href="http://ee.dev/portfolio/detail/mms-almac">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/mms-project-254x139.jpg" width="254" height="139" title="MMS Almac" />
</a>
MMS Almac Ltd
<span>View Project</span></div>
<div class="portfolio last cms content-management charity community training">
<a href="http://ee.dev/portfolio/detail/europe-direct">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/europedirect-project-254x139.jpg" width="254" height="139" title="Europe Direct" />
</a>
Ectarc
<span>View Project</span></div>
</div>?
FILTER MENU
<ul class="filter">
<li class="booking-systems">Booking Systems</li>
<li class="buddypress">Buddypress</li>
<li class="cms">CMS</li>
<li class="content-management">Content Management</li>
<li class="drupal">Drupal</li>
<li class="e-commerce">E-Commerce</li>
<li class="silverstripe">Silverstripe</li>
<li class="wordpress">Wordpress</li>
</ul>

You'll need to use the :odd selector:
http://api.jquery.com/odd-selector/
Not exactly sure how to implement it in your code, but probably something like $('.portfolio:odd') or even $('.portfolio:visible:odd').
I'll give it a try in jsfiddle in a second.

$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
would give a "zebra stripes" like effect.

Well just a minor modification then:
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");
but you will have to call it every time you hide/unhide any elements.. And you will also have to remove the classes before also.. something like this:
$("tr").removeClass("even").removeClass("odd");
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");
and i think you should be good!