HTML - Submenu Without Addin Css Code
hey guyz...am new to this forum...good to be here....
i need some help or pointers on how to create a submenu using html and javascript and not css....can someone direct me to a simple example where there is only html and javascript and no css....am postin the code which needs a submenu....how should i create a submenu so that when the mouse is on the menu..it opens a submenu to the right...more like a vertical menu...i have googled but all i found is examples with css... plz help me out here ....thanx Similar TutorialsI am using Dreamweaver and when I publish my code, the Remote Start/Alarm Combos submenu doesn't have the black background border the .leftnav menu style has. I tried changing all styles to black background, but it is still transparent. Here's my code Part 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> @charset "utf-8"; /* CSS Document */ body { background-color: #000000; background-image: url(http://i184.photobucket.com/albums/x...kground2.png); background-repeat: repeat-x; } .catHead { background-color:#0B161A; font-family:verdana,arial; font-color:#0B161A; font-size:16px; font-weight:bold; padding:8px; } .crumb { background-color:#0B161A;height:15px; font-family: verdana; color: #666; font-size: 10px; padding:4px; } .crumb a { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:hover { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:visited { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:active { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .leftNav { FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; color:#FFFFFF; } .leftNav { background-color:#000000; border:2px solid #0B161A; padding:5px; margin-top:5px; } .leftNav a{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:visited{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:active{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:hover{ color:#FFFFFF; display:block; width:165px; padding:4px; background-color:#003333; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } li.catList a, li.catList a:active, li.catList a:visited{ display:block; font-size:14px; font-family:verdana,arial; color:ccc; height:25px; padding-left:20px; padding-top:8px; vertical-align:middle; } li.catList a:hover{ background-color:#333333; display:block; font-size:14px; font-family:verdana,arial; color:ccc; height:25px; padding-left:20px; padding-top:8px; text-decoration:none; vertical-align:middle; } .link, .link a:link, .link a:visited, .link a:active { font-family: Arial; font-size: 14px; font-weight: bold; color: #008080; text-decoration: none; } .link, .link a:hover { font-family: Arial; font-size: 14px; font-weight: bold; color: #ff0000; text-decoration: none; } .mainBdy { font-color:#fff; min-height:400px; color:#ccc; width:650px; overflow:hidden; } .phoneBox { font-family:verdana,arial; font-weight:bold; font-size:14px; color:ccc; } .small { font-family: verdana; color: #000000; font-size: 10px; } .smallw { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:active { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:hover { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:visited { font-family: verdana; color: #ffffff; font-size: 10px; } .style1 { font-weight: bold; font-size: 33px; font-family: Arial, Helvetica, sans-serif; color: #000000; } .style2 { font-family: arial, verdana, courier new; font-size: 12px; color: #FFFF00; } .style3 { color: #00000 } .style4{ color: #FFFF00; font-family: arial, verdana, courier new; font-size: 14px; font-weight: bold; } .style5 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px color: #000000; } .style6 { font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FFFFFF; text-decoration: none; } .style7 { font-family: Verdana, Arial, Courier new; font-size: 18px; font-weight: bold; color: #ffff00 } #add2cart { padding-top: 0px; } #viewcart { padding-top: 0px; } /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 8em; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are same fixed width as parent */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 8.2em; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Outermost menu container has borders on all sides */ ul.MenuBarVertical { border: 0px solid #CCC; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 0px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color:#FFFFFF; display:block; width:165px; padding:4px; background-color:#003333; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #0B161A; color: #FFF; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* Hi all, I created a very simple Spry menubar using dreamweaver. It copied all the necessary CSS and JS into a folder for me. I have one question. whenever i selected (clicked) on an item(link) on the submenu. the submenu stays open while the page load in the frame. Is there a way to configure it so when i click on an item in the submenu, the submenu will close and the page will still load in the frame? Hi guys, First of all, I'd like to apologize for my writing skills as I'm from a non english-speaking country and I moved to Australia not long ago. Anyway, I'm trying to help a friend developing a website and I'm having some trouble getting the page to look like what he wants. I am an absolute rookie in website development and I'm discovering Dreamweaver as I speak. I managed to understand a few concepts based on what I know in VBA in Excel and tried to use some templates I found on the net. The last part didn't go really well and I decided to get rid of what I tried to make my explanations as clear as possible. Basically, I have a drop down menu on the left side of the page that works quite well at the moment.Wwhat I want to do is : the user goes over the first link of the drop down menu (called "General for Sale" under the section "Buying") and when he clicks on it, he loads on the right side the content of another page called "generalforsale.html. All of this obviously without refreshing the whole page and with the option of clicking on another section from the drop down menu to load another page... And all of this knowing that I'd like one specific page to be displayed on the left when the user first arrives on the website that would then be replaced by a page, depending on what he selects from the drop down menu. I have honestly tried everything I found and could understand, unsuccessfully... I have attached a lighter version of what I'm trying to do in case one of you guys has the time to have a look. I completely understand if this is not the policy of the forum and therefor apologize in advance. Thanks for reading me and for your help :-) Sub Hello, I am a student and working on a simple first project. All I'm doing right now is writing my code in text edit, saving it as "test.html", and dragging and dropping the file onto Safari/Firefox to view my code. Everything works when I'm at my college's computer lab, but when I'm on my own mac notebook, the files load in the browser as my code. I've tried a variety of samples and checked my preferences, but I can't figure out what I'm doing wrong. Sample code I'm using - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Simple Link Example 2</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Creating Relative Reference Links</H> <HR> <P>Open <A HREF="practice1.html">Practice 1</A>.</P> <P> Open <A HREF="practice2.html">Practice 2</A>.</P> <P>Open <A HREF="practice3.html" TARGET="_blank"> Practice 3</A> in a new window.</P> </BODY> </HTML> Please help! I'm trying to wrap up an assignment and have been banging my head against the wall all night. Thanks! cordelia Hello! I have a blog on blogger and i want to make a c++ tutorial.. But every time i type "<iostream>" on post, when i see it, it is only "iostream". How can i make a code like the "[code]" from BBcode to cancel the compiling from HTML? Thanx! I was curious to find out, where can i find a cool looking shoutbox code where i can put on my message forum? Looking for some neat, and cozy with some advance options. Meaning, i would like to change the colors to match with my forum and stuff. Thanks. I have a website where I want to make a drop down menu that will bring you to different pages. It is a very basic, sort of old-fashioned website that relies entirely on html. What I'm trying to do is make a drop-down menu that will be used as navigation for a section of a website and I want to have it in each internally linked page in that section, but I'm going to be adding more pages to it over time so I want to be able to put the drop-down menu code in a separate text file and then substitute it into the pages that I make that the options in the menu link to and then just edit the code in the text file when I add another page so that I don't have to go back and edit the code every single individual page whenever I add a new one among them. Basically all I'm asking is how I can put html code in a text file and then substitute that code into an html page by referring to the file. Thanks in advance for any help. Hi im rich very first post but might be a good question. im looking for a code that when you load the page the exclamation windo pops up with the message. i made one for no right mouse clicks. i need one made to when my page laods they will see the message. I want to use the code on this website: http://geekfile.googlepages.com/flvplay.... I have a video that i converted to flv on my computer...what do I do? Please help...I dont know where I put my information in this code not sure if im posting this in the right place.... but is there a code... javascript perhaps... to prevent the browser from printing? Hey I'm looking for a code for users to upload a picture. Below the picture there is a form to let other users rate the picture from 1-10 then submit it. Also below the form there is a comment box and previous comments box where people can see what others posted....its hard to explain...kinda like this picture in the attachment. Thanks in advance. what kind of working is required to insert image while working with html ? Hello, my first posting I have uploaded a script and all is well, except this! On one web page is a word "Select" when clicked on it should open a list Yet it is dead, when the mouse is over is it reads: javascript:; I used :Inspect Element with Firebug" to locate the "Select" corresponding code HTML Code: <tr class="c1"> <td width="150" align="right"></td> <td class="contentfont" colspan="2"><span id="main_category_display"><?=$main_category_display;?></span> [ <a href="javascript:;" onClick="select_category(document.getElementById('category_id').value, 'main_category_field', 'main_', false, true, 'wanted');"><?=GMSG_SELECT;?></a> ]</td> </tr> your help greatly appreciated Hi, what's this code for: ?tag= What is it for and what does it do if it's attached to something like this: http://www.ABC.com/images/spacer.gif?tag=ABC And if I rearrange the domain and file path, does this still work for whatever it's for: ?tag=ABC Thanks in advance for your help! The last paragraph on my code shows up as bold letters. Can someone please tell me why? here are my codes HTML Code: <html> <head> <title>Top ten NBA player of all time</title> <style type="text/css"> h1 {font-size: 30; font-family: arial;} h2 {font-size: 12; font-family: arial;} h3 {font-size: 22; font-family: arial;} h4 {font-size: 16; font-family: arial;} p {font-size: 14; font-family: arial;} </style> </head> <body> <h1>This is a list of the top ten NBA players of all time</h1> <h2> Written by Luke Ritchie</h2> <br/> <br/> <br/> <h3>The NBA</h3> <p>The NBA has had millions of players in it long, rich history. <br/> The NBA started in 1946 as the BAA (Basketball Association of American),<br/> then merged with the NBL (National Basketball League) and became<br/> known as the NBA in 1950. Today, I will be listing ten players, who i <br/> think are the greatest ever.</p> <hr /> <h3>10. Oscar Robertson</h3> <img src="http://sportige.com/wp-content/uploads/2010/02/Oscar-Robertson.jpg" width="400" height="400" alt="Oscar Robertson" title="Oscar Robertson" /> <p>Oscar Robertson. His nickname was "The Big O", and he Played for the Cincinnati Royals and the Milwaukee Bucks. <br/> He was the only player ever to average a triple-doule over the course of a season. <br/> He played piont guard, and was named to 12 All-Star teams. Oscar was the the key component on the Bucks in the 1970-1971, <br/> and lead them to win there only NBA title. Robertson was inducted into the <br/> Naismith Memorial Basketball Hall of Fame in 1980, and was voted one of the 50 Greatest <br/> Players in NBA History in 1996. Though All of his accomplishments came with plenty strugle, <br/> His playing career, especially during high school and college, was filled with <br/ racism and hatred toward him, and his fellow black players. Both numbers he <br/> wore, 14 on the Sacramento Kings, and 1 on the Milwaukee Bucks, were retired. <br/> He will live forever in the basketball Hall Of Fame. </p><br/> <hr /> <h3>9. Shaquille O'Neal</h3> <img src="http://www.clap.name/images/Shaq4.jpg" width="275" height="400" alt="shaquille o'neal" title="shaquille o'neal" /> <p>In his prime, Shaq may have been the best big man in the history of the league. <br/> There wasnt a person in the league that could stop him in his prime, which was in the early 2000s. <br/> He won 3 championships with the lakers and Kobe Bryant, despite Kobe and Shaqille butting heads. <br/> Then went on to win another championship in Miami with Dwayne Wade. Shaqs defense may have been <br/> equal to his offence, he was an all-around great player, and will undoubtedly end up in the <br/> Hall Of Fame in his first year of eligibility.</p><br/> <hr /> <h3>8. Bill Russell<h3> <img src="http://www.achievement.org/achievers/rus0/photos/rus0-013a.gif" width="350" height="400" alt="Bill Russell" title="Bill Russell" /> <p>Bill Russell is the greatest winner ever. 11 championships in 13 seasons, its a record that will <br/> likely never be beaten. Most people say championships are the most imporntant thing when judging greatness, <br/> so it could be argued that Russell should be number one, but the era he played in wasnt nearly as <br/> competitive as todays game. Bill is also one of the greatest defenders of all time, blocks <br/> weren't recorded in his time, but he probably would have been at the top of the record books <br/> if they did. He was inducted into the Hall Of fame in 1975.</p><br/> <hr /> <h3>7. Tim Duncan</h3> <p>T</p> </body> </html> need help on 2 areas 1st have created a form what i would like it to do is as soon as the submit button is hit it sends directly to my mail account rather than open a mail program first would, also be kinda neat to have a thank you message displayed after submit the second is i have option menu and would like an action to happen depending on what is selected ie a calendar will be available so clients can self check availability the option displays month of the year when you select a month the diary for that month will open i dont know code but am doing my best reading and looking stuff up i have tried all day but cant find what i want to do any help would be great Hello all... need help with this minor issue... site page: http://www.5starpaydayloan.com/new.html If you are viewing the page you will see that below the image of the group there is a break in the side bars that go along either side of the text... Can someone please help me figure out how to get rid of the break? Thank you! Say you need a contact form for example, you may have one stored and use that on every page you do, but do you always create you own unique form or do you google for one or maybe you see one on someone page yoi like and add it(rip it) to your own page? Same applies for other features etc... like do you do your own menus, javascript, css entirely, or do you sometimes use menus fom all these "free css menu" sites like dynamic drive..... I got some code of a tutorial for an image slider, and I used NotePad ++ to edit it with my images and links. But I don't know whats wrong?!? It won't load. I put it in Wordpress and upload the images and it doesn't work! I have attached the code file. Thanks is anyone can help! |