How to make a floating menu in css
Jul 28, 2012, by admin
How to make a floating menu in css
A website’s floating menu will remain visible and seem to float while you scroll down a webpage. Such a menu can be made using HyperText Markup Language (HTML) code, a Cascading Style Sheet (CSS) file and some JavaScript code. You will need to position the menu on your webpage and contain it in a field called a “div.” Try these steps to create a floating menu.
Steps to make a floating menu in css
Create or open an existing HTML page for your menu. Consider using a software program such as Dreamweaver to code and design your webpage.
Structure your HTML webpage’s code. You may want to have 3 separate divs for the webpage’s header, its main content, and the floating menu.
Write an opening “div” tag for the menu. Use the “id” attribute to give a name, enclosed in double quotation marks, to identify your menu’s div. An example is <div id=”my_menu”>
Create the links for your menu. After the opening “div” tag, write HTML code for links to your other webpages.
Example link code is: [http://www.mysite.com/webpage2.html Link Text]
Add a line break to put each link on its own separate line. The HTML code for a line break is <br />.
Close your menu’s div. A closing div tag is </div>
Style your menu using CSS code. Create a CSS file with the extension “.css.” Save it in the same location where you keep your HTML file.
In your CSS file, type the “#’ sign without quotation marks, followed by the div id for your menu, such as #my_menu.
On the next line, type in a left curly bracket ({). Type in “position:absolute;” without quotations to fix the menu’s positioning.
Use CSS properties and values to set the menu’s width, height, alignment on the webpage, background color, border style and color, font style and color, etc. The “width” property with a value of 200 pixels (px) is width: 200px;.
Close the menu’s CSS code with a right curly bracket (}).
Link your CSS file to the HTML document featuring your menu. In the “head” section of your webpage’s HTML code, write <link rel=”stylesheet” type=”text/css” href=”#.css” />. Replace the “#” within the quotation marks with the name of your CSS file.
Create a JavaScript file. Save it with the file extension “.js.” It should be saved in the same folder as your HTML and CSS files.
Write JavaScript code for your menu to float smoothly.
Begin the code with <script type=”text/javascript”>
Close your JavaScript with a closing “script” tag (</script>).
Link your JavaScript file to your HTML webpage. Just before the closing “head” tag (</head>) in the HTML code, write <script type=”text/javascript” src=”file_name.js”></script>. Replace “file_name” with the name of your JavaScript file.
Move your HTML, CSS, and JavaScript files to a Web server. They should be in the same folder or directory on the server. Preview your HTML webpage in a browser. Check that the menu works correctly.
