Page sideview menu help...

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!!

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:

Code:

---

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

Code:

---

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

---

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;

Code:

---

.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;
}*/

---

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.:)

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!!:)

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

Quote:

---

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.

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.

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

Code:

---

#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/

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

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.......

Hi John:
You can call the public function

Code:

---

toggle()

---

immediately after the initialization code to open the menu automatically when the page loads:

Code:

---

sideviewmenu.toggle('open')

---

Hi,

Thank you for the reply !.

When I use function immediately after the initialization code , Get " Error: Object doesn't support property or method 'toggle' "

Below is the code and order I call it , its like the menu doesn't exist when "toggle" is called from the script in the heading . Am I calling the toggle in the correct place ?

Thank you for looking at this

regards,

John.

Code:

---

<head>
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet' type='text/css'>

<link type="text/css" rel="stylesheet" href="sideviewmenu.css" />

<script src="sideviewmenu.js">

/***********************************************
* Page Sideview Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script>

jQuery(function(){ // on DOM Load
  sideviewmenu({ // call sideviewmenu() function
  //menusource: 'inline',
  main_transition_duration: 0.4,
  onopenclose:function(state){ // state is either "open" or "closed"
 
  }
  })
 } )

sideviewmenu.toggle('open')
</script>
<link rel="stylesheet" href="menu.css" type="text/css">
</head>

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

---

... Sorry to try to bump this up the list , but its driving me crazy !! :confused:

John...........

Ah yes I forgot to account for some intricacies in the script. Anyhow, easiest way to accomplish this is just to use the below slightly modified .js version of the script. Then inside your initialization code, make use of the new "state" option to set the initial state of the menu to be open:

Code:

---

jQuery(function(){ // on DOM Load
        sideviewmenu({ // call sideviewmenu() function
                menuid: 'sideviewmenu',
                state: 'close',
                onopenclose:function(state){ // state is either "open" or "closed"
                        // custom code
                }
        })
       
})

---