Add menu side bar to html pages
4 posters
Page 1 of 1
Add menu side bar to html pages
Forum phpbb 3 site: everyonesblog.net
Any chance i can add this:
to an html page?
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
Re: Add menu side bar to html pages
Please clear your question. Do yo want to design this style of menu or you want to add it on your external HTML pages?
Re: Add menu side bar to html pages
You will need the code that creates that menu. Then add the code to the HTML page.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Add menu side bar to html pages
You can do a HTML menu search on Google.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Add menu side bar to html pages
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.
Then you add your child elements :
and lastly you write your style for the elements :
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 :
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;
}
Similar topics
» How to Embed a Google Docs Form into an HTML page using HTML Pages Management
» Quick side menu
» How to make side menu?
» Side Menu.
» Side Menu
» Quick side menu
» How to make side menu?
» Side Menu.
» Side Menu
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum