Solved

Menu / Slider

Posted on 2014-09-13
14
297 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 43

Assisted Solution

by:Rob
Rob 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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 43

Expert Comment

by:Rob
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
 

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

734 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