The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Sliding Info Menu

+4
BetterHax
Jezzda
Derri
Yoshi156
8 posters

Go down

In progress Sliding Info Menu

Post by Yoshi156 May 7th 2013, 7:40 am

You seen the sliding menu on the left side? that's what I mean, I wonder if any staff know how to make like that? kindly teach me how? thanks!

http://reikai.forumotion.com/forum
Yoshi156
Yoshi156
Forumember

Male Posts : 231
Reputation : 0
Language : english

Back to top Go down

In progress Re: Sliding Info Menu

Post by Derri May 7th 2013, 12:05 pm

What sliding menu?

Derri
Derri
Helper
Helper

Male Posts : 8755
Reputation : 638
Language : English & Basic French
Location : Scotland, United Kingdom

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 7th 2013, 12:09 pm

Top left, next to the banner. I'd like to know how to create this as well.
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 8th 2013, 11:16 am

Bump.
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by BetterHax May 8th 2013, 3:48 pm

Jezzda wrote:Bump.

dont bump other thread..
avatar
BetterHax
Forumember

Posts : 304
Reputation : 3
Language : English,Tagalog
Location : United State, Philippines

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jophy May 8th 2013, 5:47 pm

Jophy
Jophy
ForumGuru

Male Posts : 17924
Reputation : 836
Language : English
Location : Somewhere

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 8th 2013, 11:12 pm

BetterHax wrote:
Jezzda wrote:Bump.

dont bump other thread..

I'm fairly sure I can bump other threads if I need an answer as well. Otherwise the thread will be forgotten.

Jophy - That link didn't help, it wouldn't work.
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by kirk May 9th 2013, 5:15 am

BetterHax wrote:
Jezzda wrote:Bump.

dont bump other thread..

Please do not moderate others.
Members can reply/bump their own threads as long as the reply is separated by at least 24 hours Smile
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 9th 2013, 11:03 pm

So is anybody able to help me with my issue?
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 15th 2013, 6:03 am

Bump
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jophy May 15th 2013, 6:40 am

Jophy
Jophy
ForumGuru

Male Posts : 17924
Reputation : 836
Language : English
Location : Somewhere

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 15th 2013, 2:43 pm

I don't want a slider. I just want an info menu that slides out of the side when I hover over it and I'd like to fill it with information about my site.
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Mati May 15th 2013, 3:27 pm

Jezzda wrote:I don't want a slider. I just want an info menu that slides out of the side when I hover over it and I'd like to fill it with information about my site.

Just give me a mins I'll wright the code for you. Wink
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

In progress Re: Sliding Info Menu

Post by Sir Chivas™ May 15th 2013, 3:45 pm

Hi,

You can do something like this, but instead of placing the image and URL code, place the text or whatever you want. Wink
http://www.csshelp.net/t365-add-floating-social-icons-on-your-forum
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Sliding Info Menu

Post by Mati May 15th 2013, 10:39 pm

Put this CSS code into your CSS.

Code:
.slide-main {
    left: 0;
    position: fixed;
    top: 20%;
    transition-duration: 1s;
}
#menu a {
    text-decoration: none;
}
#menu ul li {
    padding: 3px 25px;
}
.slide-container {
    background: none repeat scroll 0 0 #DCDCDC;
    border: 2px solid #444444;
    border-radius: 5px 5px 5px 5px;
    left: -140px;
    position: fixed;
    top: 20%;
    transition-duration: 1s;
}
.slide-main:hover {
    left: 145px;
}
.slide-main:hover .slide-container {
    left: 5px;
}

Then add this into your Homepage Message.

Code:
<div class="slide-main">
  <img src="http://cdn5.iconfinder.com/data/icons/Absolute%2032-PNG/32/Warning.png" />
  <div class="slide-container">
  <div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
            <li><a href="#">Menu Item 5</a></li>
            <li><a href="#">Menu Item 6</a></li>
            <li><a href="#">Menu Item 7</a></li>
            <li><a href="#">Menu Item 8</a></li>
            <li><a href="#">Menu Item 9</a></li>
            <li><a href="#">Menu Item 10</a></li>
        </ul>
    </div>
  </div>
</div>
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 17th 2013, 12:53 pm

Thanks! I'd like to know if there is anywhere you know of that I can find good pictures for it.. like the website provided by the topic starter and also how to make it be on every page.
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 18th 2013, 2:33 pm

Bump
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Mati May 18th 2013, 4:43 pm

Jezzda wrote:Thanks! I'd like to know if there is anywhere you know of that I can find good pictures for it.. like the website provided by the topic starter and also how to make it be on every page.

Do you have your own images.
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 18th 2013, 6:59 pm

No, that's why I'm asking. How do I have it on every page?
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 19th 2013, 9:24 pm

Bump
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Mati May 19th 2013, 10:20 pm

Jezzda wrote:No, that's why I'm asking. How do I have it on every page?

Put it in your templates overall_header
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

In progress Re: Sliding Info Menu

Post by Jezzda May 20th 2013, 11:08 am

Could you give me a screenshot of where that is?
avatar
Jezzda
Forumember

Posts : 74
Reputation : 2
Language : English

Back to top Go down

In progress Re: Sliding Info Menu

Post by Mati May 20th 2013, 12:05 pm

Jezzda wrote:Could you give me a screenshot of where that is?

Find this
Code:
<!-- END switch_login_popup -->
and put the code below that.
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

In progress Re: Sliding Info Menu

Post by kirk May 20th 2013, 7:28 pm

Matti_7 wrote:
Jezzda wrote:Could you give me a screenshot of where that is?

Find this
Code:
<!-- END switch_login_popup -->
and put the code below that.

go to admin panel> display> templates> general> overall_header template.

Find the part Matti_7 has said above, you can do a search at the top of the template as well.
Then add the second part of the code and hit save. now go back and publish it by clicking the plus icon Add and your done Smile
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum