Page sideview menu help...

[mwj427]

Script: Page sideview menu

http://www.dynamicdrive.com/dynamici...deviewmenu.htm

Hello...Im new to the forum. I was wondering if there is a way to change the icon in the sideview menu? I have managed to make it disappear, but so far not able to use the button of my choice.

To clarify...I'd like to change the icon which is clicked to make the menu appear to another icon.

Sorry if this has been addressed...I did a search but didn't get any returns.

Thanks all!!

[ddadmin]

Hmm the icon used can be anything actually, as long as it calls sideviewmenu.toggle() inside it. Here's the markup for the default icon:

<div class="toggler" onClick="sideviewmenu.toggle()"></div>

So to change it, you'd simply edit the markup above, keeping intact the onClick portion. For example:

<img src="icon" onClick="sideviewmenu.toggle()" />

[Beverleyh]

There are 2 ways to do this;

1 - define your own element and attach onClick="sideviewmenu.toggle()" to it.

2 - define your own css in the existing css file and remove the pseudo element which creates the 3 lines;

.toggler { /* Icon toggler */
	width: 30px;
	height: 30px;
	/* border: 6px solid black; */
	/* text-indent: -100000px; */
	position: relative;
	cursor: pointer;
	background:url('path/to/img.png');
}

/*
.toggler::before{
	position: absolute;
	border: 6px solid black;
	content: '';
	width: 100%;
	height: 20%;
	top: 6px;
	left: -6px;
	display: block;
}

.toggler:hover, .toggler:hover::before{
	border-color: darkred;
}*/

[mwj427]

Thanks for the response. I was able to use the first post's method, but it is awesome to know their are options. Thanks again.

[mwj427]

ok...Im back....

I would like to change the background color of the menu when it opens...I have changed just about everything I can think of but cannot make it work...

I would like to keep the same gradient ...the rgb I would like to use are are 194,243,95 ... if someone can show me where I need to change these it would be greatly appreciated. Then I can mess with different shades.

Thanks!!

[Beverleyh]

You'll need to clarify what part of the menu you mean when you say...

the background color of the menu when it opens

But even without being more specific, you can search the colour parts in the CSS file. Just do a search on "background" and replace all the color value to ones you want.

[mwj427]

Thank you for your response. Sorry for the ambiguity... so... I'll try to explain better. When the menu "slides out" after depressing the button, the default is a gradient black and/or grey color...I would like to change that color.
I tried putting new values in the rgba sections...both by changing only one and by changing all of them, but I only managed to mess it up so it wont work or no change seems to take place??? I know I'm doing it wrong but I cant seem to find the error of my ways. BTW...I am not a true web designer or coder...I am self taught and an old finance guy.

[ddadmin]

The background color of the sideview menu is defined using CSS gradients, specifically, the code in red below:

#sideviewmenu .backdrop { /* Radial gradient background behind menu layer */
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: rgb(125,126,125); /* Begin Radial gradient background */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	opacity: 0.9;
}

To edit it, just replace the above with the background color or gradient of your choice. A good tool for generating CSS gradients visually is the following: http://www.colorzilla.com/gradient-editor/

[mwj427]

wow!! awesome...thank you so much! That link you gave is awesome, too.

[NewtotheWeb]

Hi,

.. On the same page sideview menu topic , is it possible for the menu to render as open when the page loads for the first time , so you don't have to click the icon to get the menu to load ?

Thanks in Advance

John.......