Add menu side bar to html pages

Forum phpbb 3 site: everyonesblog.net

Any chance i can add this:

to an html page?

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

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

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

Where can i get that though.....

You can do a HTML menu search on Google.

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;
}

Thanks ange! Plz Lock

You're welcome

Topic solved and archived