Hey gang, it's late and my eyes won't play anymore.

 

I have a minimalist site I'm working on that implements an image that brings up a navigation menu. That's all fine and dandy and happy with how that works. However, on testing with some 'old folks', non-tech savvy peeps and general guinea pigs, I realise that it's not so obvious on where they have to click to bring up the menu

 

I've concluded that I need a popover type effect that gives a little bubble in the vein of VH1's pop up videos, or more appropriate for those who aren't familiar, Twitter Bootstrap. The popup effect only needs to be for the navigation and I'd like it to be apparent each time the user switches pages (they should be able to close it however).

 

The best way I can illustrate it is by using Zurb Foundations Joyride script - however, rather than be a 'tour' it's just for one area. I don't want to use their script though, would rather keep code to a minimum if possible.

 

Any suitable pointers would be gladly received. Attached is a quick screenshot of the desired effect.

 

Cheers!

 

I think i've understood what your after

 

Id just use a div create the effect and positioning with css and the use jquery to hide when clicked

 

Maybe something like this will work

 

<div class="pop">
    Click for menu       <a href="#">close</a>
</div>

.popnomore{display:none;}
.pop {
	background: #eee;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	position: absolute;
	width: 200px;
    top:50px;left:50px;
}

/* arrows - :before and :after */
.pop:before {
	position: absolute;
	display: inline-block;
	border-top: 7px solid transparent;
	border-right: 7px solid #eee;
	border-bottom: 7px solid transparent;
	border-right-color: rgba(0, 0, 0, 0.2);
	left: -8px;
	top: 15px;
	content: '';
}

.pop:after {
	position: absolute;
	display: inline-block;
	border-top: 6px solid transparent;
	border-right: 6px solid #eee;
	border-bottom: 6px solid transparent;
	left: -6px;
	top: 16px;
	content: '';
}

$('.pop a').click(function (e) {
 e.preventDefault();
$('.pop').addClass('popnomore')
 });

Excellent - thank you very much, mteam

 

Been playing with Bootstrap for the past hour and managed to get it working but I'd rather have something with less bloat. This looks much more of a viable solution, so will have a play with this tomorrow.

 

Thanks again - very much appreciated!

 

I think i've understood what your after

 

Id just use a div create the effect and positioning with css and the use jquery to hide when clicked

 

Maybe something like this will work

 

<div class="pop">
    Click for menu       <a href="#">close</a>
</div>

.popnomore{display:none;}
.pop {
	background: #eee;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	position: absolute;
	width: 200px;
    top:50px;left:50px;
}

/* arrows - :before and :after */
.pop:before {
	position: absolute;
	display: inline-block;
	border-top: 7px solid transparent;
	border-right: 7px solid #eee;
	border-bottom: 7px solid transparent;
	border-right-color: rgba(0, 0, 0, 0.2);
	left: -8px;
	top: 15px;
	content: '';
}

.pop:after {
	position: absolute;
	display: inline-block;
	border-top: 6px solid transparent;
	border-right: 6px solid #eee;
	border-bottom: 6px solid transparent;
	left: -6px;
	top: 16px;
	content: '';
}

$('.pop a').click(function (e) {
 e.preventDefault();
$('.pop').addClass('popnomore')
 });

 

Just tried this out and it works fantastically well and just what I needed I think I might incorporate a icon font or similar for the close 'button' but even the styling is not far removed from what I've been trying to achieve. The Bootstrap tooltip/popover was excellent but there's so much bloat - this is perfect.

 

I'm not afraid to admit it, but I don't really understand how some of the most basic jQuery works, but it's a lot easier to decipher than Bootstrap Thanks again!