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.

Add menu side bar to html pages

4 posters

Go down

Solved Add menu side bar to html pages

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

Forum phpbb 3 site: everyonesblog.net

Any chance i can add this:
Add menu side bar to html pages Captu282
to an html page?


Last edited by luiz1877 on January 3rd 2014, 8:40 pm; edited 1 time in total
luiz1877
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 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?
avatar
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 January 3rd 2014, 7:14 pm

Can you add the thing in the image to html pages.
luiz1877
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 January 3rd 2014, 8:36 pm

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


Add menu side bar to html pages Slgray10

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

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Add menu side bar to html pages

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

Where can i get that though.....
luiz1877
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 January 3rd 2014, 8:41 pm

You can do a HTML menu search on Google.


Add menu side bar to html pages Slgray10

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

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Add menu side bar to html pages

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Add menu side bar to html pages

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

Thanks ange! Plz Lock
luiz1877
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 January 4th 2014, 1:37 pm

You're welcome I love you

Topic solved and archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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