Floating Menu Position | Widget & Gadgets | .:::OnlineDrive:::.

Αρχική Σελίδα > .:::OnlineDrive:::. > Widget & Gadgets > Floating Menu Position

Post reply From end

<!DOCTYPE html>
<html>
<head>
<title>Example</title>


<style>
body {
background-image: url('/pix/samples/bg1.gif');
}

main {
margin-bottom: 200%;
}

.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
bottom: 110px;
right: 0px;
}

.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
</style>

</head>
<body>


<main>

<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>

<nav class="floating-menu">
<h3>Floating Menu</h3>

<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/database/">Database</a>

</nav>

</main>

</body>
</html>

Copy code

live: http://www.quackit.com/html/html_editors/scratchpad/preview.cfm?example=/css/codes/css_floating_menu_positioned

permalink_symbol Reply

created_at 17-02-11 02:51 (edited 17-02-11 14:06 by GRadmin )

Αρχική Σελίδα > .:::OnlineDrive:::. > Widget & Gadgets > Floating Menu Position

Online: Guests: 1

GreecePtort

Συμμετέχετε δωρεάν σε όλα τα θέματα του forum.
[Γίνε Moderator στο φόρουμ και βοηθησε μας. Επικοινωνία με Admin]
*Συνεχώς ανεβαίνουν αρχεία για κατέβασμα.