Jump to content

Archived

This topic is now archived and is closed to further replies.

Leonardo da Vinci

spy scroll menu

Recommended Posts

Leonardo da Vinci

Hi guys,

 

I hope you are OK

 

Please can you help me for how to build a spy scroll menu in PageLines DMS , I tried to use the instruction in PageLines DMS Doc and put the cods and all things cool but how to link the menu with section like when I click on home bottom take me to home section and so on , I use all section in a one page like 

Welcome section

About us section

what we do section

 

I mean like a singe page websites 

 

Thanks 

Share this post


Link to post
Share on other sites
atcdomainsolutions

Hi guys,

 

I hope you are OK

 

Please can you help me for how to build a spy scroll menu in PageLines DMS , I tried to use the instruction in PageLines DMS Doc and put the cods and all things cool but how to link the menu with section like when I click on home bottom take me to home section and so on , I use all section in a one page like 

Welcome section

About us section

what we do section

 

I mean like a singe page websites 

 

Thanks 

Well, once you add the Scroll Spy widget, you need to add your  names to the areas of the page you want it to scroll to.

 

The code you add looks like this:

 

<h1 class="scroll-header" title="Web Design">PUT ANY TEXT HERE YOU WANT OR LEAVE BLANK IF YOU WANT A BLANK ANCHOR</h1>

 

<h1 class="scroll-header" title="Webmaster/SEO Services"></h1>

 

The bold and underline parts above are what you change to whatever you want to name it.  Whatever you add there will populate the Scroll Spy and when that name is clicked on the Scroll Spy, it will move to that section.  I added the codes above to my Highlight widgets that I added RIGHT ABOVE the area that I wanted it to go to.  I purposely did not fill out anything between the h1 and /h1 tags since I didn't want any text to appear there.

 

My site this is on is http://atcdomainsolutions.com

Share this post


Link to post
Share on other sites
Leonardo da Vinci

thanks

 you rock!  perfect!

but how can change the color of spy menu or can

Share this post


Link to post
Share on other sites
batman

Hi

You need add a CSS rules at your Custome Code

 

This is the "original colors" 

 

 

.spynav {

    background-color: rgb(232, 232, 232);

    background-image: -moz-linear-gradient(center top , rgb(246, 246, 246), rgb(212, 212, 212));

    background-repeat: repeat-x;

    border: 1px solid rgb(186, 186, 186);

    box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4) inset;

    border-radius: 4px 4px 4px 4px;

    -moz-box-sizing: border-box;

}

 

For example I change this and add this code to my test web

 

 

.spynav {

    background-color: red);

    background-image: none;

    background-repeat: repeat-x;

    border: 1px solid rgb(186, 186, 186);

    box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4) inset;

    border-radius: 4px 4px 4px 4px;

    -moz-box-sizing: border-box;

}

 

 

You can change it as you like, see the image

 

 

http://screencast.com/t/3ZcAhmQlg


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Leonardo da Vinci

Thanks a lot , It is amazing 

 

But if we have sub-title like 3 subtitle in one section , how can we add them in spy menu under main title ?

 

Home

services

+about

  - FAq

  -About us 

  - contact us 

Share this post


Link to post
Share on other sites
James B

Do you mean so the titles displaying in the scrollspy nav section appear in a dropdown? If so then scrollspy wouldn't be able to do that out of the box unfortunately, it automatically picks up the titles from the html tags you place within the page and inserts them in to the scrollspy menu.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×