GRadmin: <!DOCTYPE html>&l

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

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

<!-- CSS -->	
<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>

<!-- HTML -->
<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>

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 11:51 (edited 17-02-11 23:06 by GRadmin )

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

Online: Guests: 1

GreecePtort

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