The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Add menu side bar to html pages

View previous topic View next topic Go down

Solved Add menu side bar to html pages

Post by luiz1877 on January 2nd 2014, 4:18 am

Forum phpbb 3 site: everyonesblog.net

Any chance i can add this:

to an html page?


Last edited by luiz1877 on January 3rd 2014, 8:40 pm; edited 1 time in total

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by ashik4u on January 3rd 2014, 10:19 am

Please clear your question. Do yo  want to design this style of menu or you want to add it on your external HTML pages?

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by luiz1877 on January 3rd 2014, 7:14 pm

Can you add the thing in the image to html pages.

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by SLGray on January 3rd 2014, 8:36 pm

You will need the code that creates that menu. Then add the code to the HTML page.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by luiz1877 on January 3rd 2014, 8:38 pm

Where can i get that though.....

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by SLGray on January 3rd 2014, 8:41 pm

You can do a HTML menu search on Google.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by Ange Tuteur on January 3rd 2014, 10:27 pm

Hello ,

It is quite simple

First you create a parent element with a class :
This will allow you to move the menu anywhere on screen with its children.
Code:
<div class="menu"></div>

Then you add your child elements :
Code:
<div class="menu"><a href="/link1" class="menu_link">link 1</a><a href="/link2" class="menu_link">link 2</a><a href="/link3" class="menu_link">link 3</a></div>

and lastly you write your style for the elements :
Code:
<style type="text/css">
.menu {
background:#257;
border-radius:6px 6px 0px 0px;
position:fixed;
right:0;
top:40px;
width:98px;
height:auto;
padding:3px;
}
.menu_link {
font-weight:bold;
color:#fff;
display:block;
border-radius:6px;
}
.menu_link:hover { color:#ff8; }
</style>

That menu is created from manipulating the elements of the phpbb3 navbar with CSS.

The CSS I wrote for it, if you want to learn on the properties used :
Code:
/*Navbar*/
.navbar a.mainmenu{
margin:-11px 0px;
font-weight:bold;
font-size:11px;
display:block;
color:#fff;
border-radius:6px;
transition:300ms;
-webkit-transition:300ms;
}
.navbar a.mainmenu:hover{
color:#ff8;
background:#368;
padding-left:6px;
text-decoration:none;
}
a.mainmenu img { display:none; }
a#logout.mainmenu { font-size:0; }
a#logout.mainmenu:after {
content:"Log out";
font-size:11px;
display:block;
margin-top:-25px;
}
ul.navlinks {
border-bottom:1px dashed #479;
text-align:left;
position:relative;
top:5px;
right:10px;
width:105px;
padding:6px;
}
/*Navbar Base*/
.navbar {
border-radius:6px 0px 0px 6px;
border:1px solid #479;
border-right:3px solid #146;
background:#257;
position:fixed;
height:auto;
width:98px;
right:0px;
top:40px;
}
/*Nav Searcher*/
p.nomargin .search{
border-radius:6px;
background-image:none;
width:105px !important;
position:relative;
right:-15px;
padding:4px;
}
p.nomargin > input.button2{
display:none;
}
/*Footer*/
a.icon-home{
display:none;
}
#page-footer .navbar/*DO NOT MODIFY*/{
background-color:transparent;
position:inherit !important;
display:inline !important;
border:none;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by luiz1877 on January 4th 2014, 12:49 am

Thanks ange! Plz Lock

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by Ange Tuteur on January 4th 2014, 1:37 pm

You're welcome I love you

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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