Floating Menu Position
The menu below an example of a floating menu. As you scroll down the page/(frame), you will notice the menu stays fixed in the same position on the page.
<!DOCTYPE html>
<title>Example</title>
<style>
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 200px;
z-index: 100;
position: fixed;
bottom: 0px;
right: 0px;
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
</style>
<main>
<nav class="floating-menu">
<h3> <h3><?php
echo(rand(100,1000));
?> </h3></h3> <a href="/css/">Online</a>
</nav>
</main>
Post a Comment
0Comments