HTML - Separate File For Navigation Menu Without Using Frames?
I'm very new to HTML/CSS/Javascript. In the website I'm trying to build, I want to display a relatively simple navigation menu on the left side of the webpage, similar in look to the one here (example):
http://build-website.com/design/opportunity.html Is there some way to put the initialization text for the navigation menu in a separate .html file (or, just some other file), so that every time I want to add a section/link to the nav menu, I won't have to go through each of my web pages individually and add the code for the link? (I am not going to use frames because, among other things, that would make it more difficult to bookmark and copy addresses of individual pages) I have been teaching myself through the w3schools tutorials, but despite looking through them and googling for answers I haven't been able to find a solution. Is this possible in HTML? Something that would allow something like like <div src="navmenu.html"> would be ideal but I haven't been able to find anything. (At the moment I'm just using notepad and typing in code manually) Similar TutorialsI know frames are not the most popular thing in the world, but I was wondering if there was a way I could make a link on a page open two separate pages in two separate forums... say I have a link port, and I want it to open portside.html in frame "orange" and port.html in frame "main" all with one link... I would include code, but seeing as I have no idea how to do it, I can't Thanks for any help you can give me... knud I am trying to place a horizontal navigation bar (or menu, whatever its called) in a frame at the top of the screen while another horizontal frame below it displays the contents once the user clicks on one of the menu bar items. I have done this with just links; however, I am having a tough time displaying whats clicked in the menu appear in the frame below it. For example- how do I make another html file I made (not a url to a website but for ex. " website.html") appear in the frame directly below the menu once the user clicks on the "link 1" tab in the menu bar? Here is the code I got for a simple menu (css style sheet not attached)- Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="menu_style.css" type="text/css" /> </head> <body> <div id="menu"> <ul> <li><a href="" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div> </body> </html> And the code for the index file Code: <html> <title>Example</title> <frameset rows="65,*"> <frame src = "menu.html"> <frame src = "Homepage.htm" name="showframe"> </frameset> </html> Any help would be appreciated! Thanks Hello, First of all I am not a fan of HTML frames but in this case it is necessary.. Please take a look at http://www.2chill.net/frame.html Basically I want the navigation (located in the top frame) to appear in front of the main frame.. is this possible? If that is undoable, is it possible to create a HTML page which contains an iframe with a height & width of 100% minus a fixed number of pixels for header and footer? If that is possible, I could set the z-index of the navigation to a higher number than the z-index of the iframe which will ensure the proper visualization (?). Thanks, John Hello guys! Let me explain the problem... I have a website full of radios, 12 on total, and all of them have something like this: <object id="Radio01" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" width="140" height="45" align="middle"> <param name="FileName" value="Link_to_the_stream"> <param name="Autostart" value="False"> <param name="enableContextMenu" value="False"> <param name="ShowControls" value="True"> <param name="ShowDisplay" value="False"> <param name="ShowStatusBar" value="False"> <param name="Volume" value="100"> <embed src="Link_to_the_stream" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/download/default.asp" width="140" height="45" align="middle" autostart="0" enableContextMenu="0" showcontrols="1" showdisplay="0" showstatusbar="0" volume="100"></embed></object><br> <b><a href="Link_to_the_website" target="_blank"> Radio_name </a> As the radios are continually going on and off, sometimes I need to switch them. But the html of my website is too long and I would not like to edit it every time I need to switch a radio. I would like to, instead, create an apart document with variables like: Link_to_stream = "http://www.link.com:port/" Link_to_the_website = "http://www.radiowebsite.com/" Radio_name = "Name of the radio" And then make the html call these variables, so if I wish to switch a radio, I would only edit the file... The tricky part would be to edit the object src, I think. Is there any way to do that? Any method? I'm using conventional html on my website. Thanks in advance! I have a Flash menu in a top frame, with a bottom frame that holds the content. Some of the content is large and needs to be scrolled. I would like the site to appear frameless, so the menu scrolls along with the content (so if you scrolled all the way down, you wouldn't see the menu). I initially tried putting it all into another frame, but didn't have much luck with that. I'm open to any suggestions. Let me know if I need to clarify anything. Thanks. Hello guys ! Ok, i have this website: www.global-publicity.com and, how you see, i have two jump menus there . Well i wonder how can i do to click on Choose continent and when i click on Europe automatically open in left and right frames two html pages in there BUT open my second menu also (ROMANIA) Hope you understand and sorry for my bad english... Hi, on my website I've made a navigation menu from a table. What I wanted to know was if there was an easier way of making changes to it without having to go to every page and editing the HTML. The website is located here ( www.robs550paracord.com ). I'd like to keep the look of the nav bar the same, w/o having to use flash. Thank You. http://www.ivoog.com/test1 The page is fully complete, feel free to give any suggestions/updates. However, the only problem I have found so far is that in Internet Explorer 6, the menu does not turn green onmouseover. Is there a simple fix for this? Thanks. I'm trying to build a horizontal menu that has tabs. Basically it's a horizontal 5px line with the inactive links/tabs upside down hanging from the line, and the active page having the tab above the line. But I'm having a heck of a time getting the css to work on the one tab on top (contact link shown here). Anyone have any ideas how I can accomplish this? You can see my css attempt below. Thanks!! Code: #menu { width: 490px; height: 20px; padding-left: 300px; padding-top: 72px; border-bottom: 5px solid #b8ac85; } #menu.down { width: 490px; height: 20px; padding-left: 300px; padding-top: 92px; border-bottom: 5px solid #b8ac85; } #menu ul { list-style: none; } #menu li { display: inline; } #menu.up ul { list-style: none; padding-top:40px; } #menu.up li { display: inline; padding-top:-40px; } #menu a { float: left; width: 84px; height: 20px; display: block; text-align: center; text-decoration: none; color: #663300; font-weight: normal; font-size: 12px; text-transform: uppercase; padding-top: 5px; background: url(images/button_down.gif) no-repeat; } #menu a:hover { width: 84px; height: 20px; padding-top: 5px; color: #FFffff; text-decoration: underline; } #menu a.up:link { float: left; width: 84px; height: 20px; display: block; text-align: center; text-decoration: none; color: #663300; font-weight: normal; font-size: 12px; text-transform: uppercase; padding-top: 5px; background: url(images/button_up.gif) no-repeat; } #menu a.up:hover { width: 84px; height: 20px; padding-top: 5px; color: #FFffff; text-decoration: underline; } So Im on my way discovering Wordpress. My html/css knowledge is more then reaching.. php is my problem. I want to know how to have one menu on the homepage. But another menu on the follow up pages. I want to convert this site, so have a look and press the first button on the right to see what I mean. My problem is that I dont know how to load that .css file / several .css files ? thanks for reading Hi, Can anybody tell me how to code a sliding navigation bar? By sliding navigation menu i mean that when the user scrolls down the page, the navigation menu follows the screen down and vice versa. Below I have pasted my code for my navigation menu. Cheers, <div id"quicklinks"> <p id="quicklinks"> <img src="images/greekflag.jpg" alt="Greek Flag"><br> <br> <a href="index.html">Home</a><br> <br> <a href="pages/apartment.html">Apartment Details</a><br> <br> <a href="pages/kassiopi.html">Kassiopi</a><br> <br> <a href="pages/corfu.html">Corfu</a><br> <br> <a href="pages/corfutimeline.html">Corfu Timeline</a><br> <br> <a href="pages/gallery.html">Gallery</a><br> <br> <a href="pages/quiz.html">Corfu Quiz</a><br> <br> <u><b>External Links</b></u><br> <br> <a target="_blank"href="http://www.kassiopi.info">Kassiopi Experience</a><br> <br> <a target="_blank" href="http://www.kassiopi.org">Kassiopi</a><br> <br> <a target="_blank" href="http://www.greeklandscapes.com/greece/corfu.html">Hydropolis Water<br> Park</a><br> <br> <a target="_blank" href="http://www.agni.gr">Agni</a><br> <br> <a target="_blank" href="http://www.kassiopi-cosmic.com">Kassiopi-Cosmic</a><br> <br> <a target="_blank" href="http://www.aqualand-corfu.com">Aqualand</a><br> <br> <a target="_blank" href="http://www.yannisrentacar.gr">Yannis Rentacar</a><br> <br> <img src="images/greekflag.jpg" alt="Greek Flag"> </div> </p> Hi guys, www.ivoog.com - I am having a problem with IE 6 on the navigation menu. Open it up in IE 6 and mouseover the different buttons (scooters, miniscooters, bikes, atvs, accessories, etc). See how it kind of gets "messed up" when you mouseout? What is the problem? Is it a simple solution? Here's my CSS: http://www.pics.ivoog.com/top/navigation.css javascript: http://www.pics.ivoog.com/top/navi.js If it's a fairly simple solution what do I need to change? Thanks! How do I made a navigation menu, with expandable arrows? So basically its a vertical menu, with main headings one under the next, then if a main heading has sub headings, you would click the plus icon next to it, to expand it, and you could see the subheadings under it, and indented. Like how it looks in windows registry (regedit). Does anyone know how to create this in Dreamweaver? I'm mostly interested in how the navigation bar jpg has sort of an image map idea to it (even though it's not an image map). This is how the navigation bar looks in your html browsers: This is how it looks without any CSS coding: This is how the navigation bar's jpg looks alone: (different states for how the navigation "button" will look when hovered over, clicked, etc) Any help would be greatly appreciated! I'm perfectly comfortable with file paths when going forwards but in my site i've got html files in sub folders and I want to be able to go back to the root. Example. In my main htdocs folder i've got my index and stylesheet But i've also got a folder called leagues and in that folder i've got a file called leaguetables.html. In the top of my /leagues/leaguetables.html file I want to be able to reference the stylesheet in the root folder but how do I call it? I want to avoid using the full website name e.g. http://mannyroadend.co.uk/stylesheet.css as that feels like bad programming so how's it done? Thanks. Hi, I have a php include menu on my website, which will link to pages in different folders and subdomains. However I don't know how to make it work on all pages because the root folder will be different, as pages are in a lot of different places. e.g. index.php for the homepage doesn't work for pages out of the main folder. As the same menu will be included on all pages, it will have to work for all folders and subdomains. I've tried absolute paths e.g. /home/username/public_html/....file which doesn't work. the only way I have found to work is http://www.pagelocation.. I didn't really want to use that way though. can anyone offer any help? thanks The website I am working on has been constructed all with html, css, and javascript - it is currently not hosted at this point. On each page there is a menu on the left side that has all the links. I am looking for a way that I could update all of these links by updating just one file. The left side code is essentially: Code: <div id="links"> <table> ---- </table> <table> ---- </table> </div> I was thinking javascript could do this, but I don't have enough know-how to do this. I have lots of computers that aren't connected to the internet. I am not making a web page, but I think I can use Internet Explorer and HTML to help me with something. The users will be installing software on the PC with a CD with a batch file that I have made. There is a point where I need to tell the user "plug in device now and close this window when you have finished" and other messages like that. I was thinking of just making a simple .html file that sits on the CD and when I come to that point in the installation just call the appropriate file to display the message. So, in notepad, I am trying to make a .html file that when executed (like double clicked or called from the batch file) will be a small window with the menus disabled and simply displays the message. If there is a better way to display a message to the user, please let me know. Maybe what I want is called a message box? Thanks for sharing your expertise. I have a youtube video on front of the school website and a horizontal dropdown menu just slightly above it. What is happening is when i hover over a menu item the drop down menu is going under the youtube video. But this is only happening on IE but not firefox http://www.rosebridge.wigan.sch.uk Does anyone have a idea? Hello again, I have just spent hours adding a script to all my pages for drop down menus and have run into a problem I have no idea how to fix. The menus won't drop down over the top of the swf files I have on two of my pages. Everything else works perfect, it's just these two pages and one happens to be my homepage. I know someone out there will have the answer. This forum hasnt let me down yet! Can a kind person please offer me advice on how to fix this or even tell me how to fix it. My page is ozlotteriesonline.net if you need to view it. Thanks in advance |