Solved

Menu / Slider

Posted on 2014-09-13
14
284 Views
Last Modified: 2014-09-15
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
0
Comment
Question by:Richard Korts
  • 9
  • 3
  • 2
14 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
ID: 40321265
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
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 200 total points
ID: 40321315
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
 

Author Comment

by:Richard Korts
ID: 40321953
To Rob Jurd, leakim971:

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

Thanks
0
 

Author Comment

by:Richard Korts
ID: 40321955
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
 

Author Comment

by:Richard Korts
ID: 40321956
I meant davispipe.com
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40322057
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40322361
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Richard Korts
ID: 40323595
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
 

Author Comment

by:Richard Korts
ID: 40323805
To Rob Jurd,

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

But I will outsource if needed.
0
 

Author Comment

by:Richard Korts
ID: 40323915
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40323943
(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
 

Author Comment

by:Richard Korts
ID: 40324070
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
 

Author Closing Comment

by:Richard Korts
ID: 40324092
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
 

Author Comment

by:Richard Korts
ID: 40324235
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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now