Menu / Slider

Hello,

Please look at www.davispipe.com. Note on the main page the dark blue background menu with the angled left side border. Note the mouseover effect. Note also that some of the menu items (like the top one, Irrigation) has a submenu that shows when clicked.

This is all done with Flash, a Flash on top of another Flash, the main page images slider is also Flash.

We want to get rid of Flash.

Please look at http://rkassoc.org/Davis/wooslider_thumb.html. This is using flexslider from woothemes (using Jquery). I believe I can create the semitransparent area over the photos using Photoshop layers, one on each photo.

My question is, how can I use Jquery or CSS to do the menu with the sloped left edge and retain the effects in the menu, most importantly the sub menus.

Any ideas welcomed.

Thanks
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/zcca7hm2/1/

jQuery :
    $("<div id='white-transparent'/><div id='blue-solid'/>").insertAfter(".flexslider .slides");

Open in new window

CSS:
#white-transparent {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 68px;
    background-color: white;
    opacity: 0.5;    
}
#blue-solid {
    position: absolute;
    bottom: 68px;
    border-bottom: 40px solid blue;
    border-left: 137px solid transparent;
    height: 0;
    width: 100px;
    right: 0;    
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
Still a bit to do but something like this: http://jsbin.com/tevese/1/edit

<!DOCTYPE html>
<html>
	<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
		
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<meta charset="utf-8">
		<title>JS Bin</title>
	</head>
	<body>
		<div class="row">
			<div class="blue-solid col-xs-6"></div>
			<div class="white-transparent col-xs-6">
				<ul class="menu">
					<li>> Irrigation
						<ul>
							<li>Sprinkler</li>
							<li>Drip / Low Volume</li>
							<li>Pumps</li>
							<li>Water Management</li>
						</ul>
					</li>
					<li>> Pumps</li>
				</ul>
			</div>

		</div>
	</body>
</html>

Open in new window


.blue-solid {
    position: relative;
    border-bottom: 300px solid transparent;
	border-right: 70px solid rgb(40,55,129);
    height: 0;
    width: 100px;
    right: 0;    
}
.white-transparent {
	background-color: rgb(40,55,129);
	height: 300px;
}
ul {
	list-style: none;
	color: rgba(200,200,200,1);
	font-size: 16px;
	padding: 10px;
	cursor: pointer;
}

Open in new window


$(function() {
	$(".menu").find("ul").hide();
	$(".menu li").on("click", function() {
		$(this).children("ul").slideToggle(400);
	});
});

Open in new window

0
Richard KortsAuthor Commented:
To Rob Jurd, leakim971:

I don't understand what controls the angle of the blue - white border. I looked at the css & ???

Thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Richard KortsAuthor Commented:
To To Rob Jurd, leakim971:

Also, I would prefer it EXACTLY duplicate davidepipe.com in that the transparency fades from opaque at the blue - white border to NOT transparent (solid white) at the left border of the slide.

Thanks
0
Richard KortsAuthor Commented:
I meant davispipe.com
0
leakim971PluritechnicianCommented:
http://jsfiddle.net/zcca7hm2/3/
Read this : https://developer.mozilla.org/fr/docs/Web/CSS/linear-gradient

 #white-transparent {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 68px;
    background: linear-gradient(to right, rgba(255, 255, 255,1) 20%, rgba(255, 255, 255,0) 100%);
}

Open in new window

0
RobOwner (Aidellio)Commented:
This isn't perfect but it shows you how jquery and css can be used to achieve the migration away from flash: http://jsbin.com/tevese/2/edit

This isn't something that can be answered easily here.  Do you have a developer that is going to do this for you or are you attempting to do it yourself?
0
Richard KortsAuthor Commented:
To Rob Jurd

Let's concentrate on the menu only. I can get that partially working. See http://rkassoc.org/Davis/menu_only.htm

How do I get it so that  the left sloped border is included & it is sort of positioned to the right so it approximates the look at www.davispipe.com?

Thanks,

Rkorts
0
Richard KortsAuthor Commented:
To Rob Jurd,

I would prefer to do it myself; gains me experience & it is less costly.

But I will outsource if needed.
0
Richard KortsAuthor Commented:
To leakim971,

I have it pretty close here.

http://rkassoc.org/Davis/index1.htm

A few questions:

(1) How do I make the angle of the left side a little less? I've tried messing around with your css, I can't get it to change.

(2) How do I put text on top of the transparent part? How do I put menu items over the blue part?

CSS attached (as I modified it).
styles1.css
0
leakim971PluritechnicianCommented:
(1) play  with border-left
(2) it's a div, put another div inside to play with position, use <p>one line</p> to add a ligne
0
Richard KortsAuthor Commented:
To leakim971

I'm not clear how to put another div inside of a div in a Jquery function.

Can you give me an example? Just put ANY text in.

My current HTML & CSS attached.
index1.htm
styles1.css
0
Richard KortsAuthor Commented:
Lots of effort by both of you.

I still am not done, I will open another question shortly to address the "innards" of the transparent & menu areas.

Thanks!
0
Richard KortsAuthor Commented:
To leakim971,

See attached. Anytime the mouse moves over the slider area, a tiny box with "F001" appears in the upper left corner of the transparent area AND in the upper right of the blue menu section.

How can I get rid of these?

Thanks
F001.jpg
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.