|
HTML - Sliding Navigation Menu
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> Similar TutorialsHi, 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. 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 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). 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;
}
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! 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 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) Hi all - I have created an entry page for my site allowing visitors to decide which section to enter. I have two images that slide on mouse over using javascript. http://www.colletts.co.uk/dolomites_pyrenees.html I used a lightweight Javascript Accordian to accomplish this from http://www.leigeber.com/2008/05/hori...ccordion-menu/ What I want to do is accomplish the same thing with a div and not an image allowing to ramp up the SEO involved, make the entry button a rollover and separate pictures and text rather than just two images. Any ideas? Any experience of this? please help, Mas Goodafternoon, How can I make pictures slide in, when you open the page? Hi, can you suggest me where I can find a snippet do to these kind of animations (sliding images) ? I would like to integrate it in a Joomla website. http://wearebuild.com/ thanks Hey there, I'm feeling my through the dark trying to put an animated sliding panel on my site. It works, but its initial state is open, which defeats its purpose. Will someone please look at this short code and let me know what to do? Thanks! Here's the HTML, followed by the CSS, followed by the javascript: <html> <head> <link type="text/css" rel="stylesheet" href="Animated-Collapsible-Panel-5.css" /> <script language="javascript" type="text/javascript" src="Animated-Collapsible-Panel-5.js"></script> </head> <body> <!-- Animated collapsible panel, with separate CSS and JavaScript --> <div style="width:470px;"> <div class="squarebox"><div class="squareboxgradientcaption" style="height:20px; cursor: pointer;" onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div style="float: left">I bequeath myself to the dirt to grow from the grass I love...</div><div style="float: left; vertical-align:left"><img src="../images/collapse.gif" width="25" height="5" border="0" alt="Show/Hide" title="Show/Hide"/></div> </div><div class="squareboxcontent"> <img width="150" height="150" src="http://www.lesliehawes.com/wordpress/wp-content/uploads/2008/09/chief-joseph-pendleton-blanket-pattern.jpg" alt="This is an image" title="This is an image" /><br />Content goes here...</div> <img width="170" height="0" alt="" src="../images/shadow.gif"/> </div> </body> </html> .squarebox { width: 215%; text-align: center; overflow: hidden; } .squareboxgradientcaption { color: #ffffff; padding: 5px; background-image: url( ); background-repeat: repeat-x; } .squareboxcontent { background-color: #f5f5f5; padding: 10px; overflow: hidden; border-top: solid px #336699; } // not animated expand/collapse function togglePannelStatus(content) { var expand = (content.style.display=="none"); content.style.display = (expand ? "block":"none"); toggleChevronIcon(content); } // current animated collapsible panel content var currentContent= null; function togglePannelAnimatedStatus(content, interval, step) { // wait for another animated expand/collapse action to end if (currentContent==null) { currentContent = content; var expand = (content.style.display=="none"); if(expand) content.style.display = "block"; var max_height = content.offsetHeight; var step_height = step + (expand ? 0 : -max_height); toggleChevronIcon(content); // schedule first animated collapse/expand event content.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + interval + "," + step + "," + max_height + "," + step_height + ")", interval); } } function togglePannelAnimatingStatus(interval, step, max_height, step_height) { var step_height_abs = Math.abs(step_height); // schedule next animated collapse/expand event if (step_height_abs>=step && step_height_abs<=(max_height-step)) { step_height += step; currentContent.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + 2 + "," + 2 + "," + max_height + "," + step_height + ")", interval); } // animated expand/collapse done else { if (step_height_abs<step) currentContent.style.display="none"; currentContent.style.height = ""; currentContent = null; } } // change chevron icon into either collapse or expand function toggleChevronIcon (content) { var chevron=content.parentNode .firstChild.childNodes[1].childNodes[0]; var expand=(chevron.src.indexOf("collapse.gif")>0); chevron.src=chevron.src .split(expand ? "expand.gif" : "collapse.gif") .join(expand ? "collapse.gif" : "expand.gif") } I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Hello, I'm new to this forum, so first, hello! Actually, I'm new to web design in general but have taken on the role at the church I work at because our old site was a mess. I downloaded some nice looking templates and have been using them as a foundation. The site is www.miamibc.com. If you go there and look at the header menu (home, about us, etc), I want to consolidate that menu some and add a drop down menu with more choices. Is there a way I can do this while keeping it looking the way it does now? If you need any more info from me, let me know. Thanks for your help! Ben Hi there, I am currently working on a website for the school I work at. The website requires a drop down menu that has some submenus to it. Since the site it going to be rather large, I decided to create a div for the navbar where I would use an SSI file. This would allow me to change the navbar in one place rather than on 25 pages. I have created the navbar in Fireworks, and have set up the properties for each button. I have altered the paths to the images so that they appear properly (see http://www.prestigeinteractive.com/wmems2/index.shtml ), I place the references to the js and css file in the shtml file where the menu is loaded and the paths are correct to the best of my knowledge. The problem I am facing is when the page is viewed, the drop down menu appears fifty or so pixels above where they should appear. I am not sure if I've done this correctly. Please view my work at http://www.prestigeinteractive.com/wmems2/index.shtml The files have been uploaded to this thread, as they are too long to cut and paste. Thanks for any help you can give. Greg I initially had my website on freewebs.com, and used the code <!--#include virtual="/nav.shtml" --> for the navigation on each html page. I've now found a host and am trying to transfer all the pages over, however I can't seem to get the navigation sorted. The navigation should be on the left of this page - http://broadcast.tcg-publicity.org/about.html I really don't know why it's not working, as I haven't changed anything or edited any of the files. And the files are definitely in the right folder. This is the current index, and you can see that the correct file is there - http://broadcast.tcg-publicity.org/ Does anyone know what could be wrong?? I built a nice little tabbed navigation and it works great in firefox and safari and displays perfectly fine in IE 6 but for some reasons my rollovers don't work. I'm not too sure as to why, everything seems fine to me... but apparently not to Internet Explorer. I've attached my code below and you can see an example of the nav here. (I don't have IE7 installed so if someone can take a look at it in that and let me know if it works or not that would be awesome!) Code: <!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>
<!--[if IE]><link rel="stylesheet" media="screen" type="text/css" href="css/htc.css" /><![endif]-->
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
body { background: #999; }
#tab_wrap { width: 328px; background: #fff; }
#tab_wrap h1 { margin: 0 0 1px 0; width: 328px; height: 37px; background: #44c2fd url(images/header_reviews.png) no-repeat 0 0; text-indent: -2800px; }
#tab_wrap ul { width: 328px; height: 31px; list-style-type: none; }
#tab_wrap ul li { display: block; float: left; }
#tab_wrap a { display: block; width: 55px; height: 31px; text-indent: -2800px; }
#tab_wrap a:hover { background-position: 0 -31px; }
#tab_wrap a.last { width: 53px; }
#tab_wrap a.current { background-position: 0 -31px; }
#music { background: #44c2fd url(images/tab_nav_music.png) no-repeat 0 0; }
#film { background: #44c2fd url(images/tab_nav_film.png) no-repeat 0 0; }
#dvd { background: #44c2fd url(images/tab_nav_dvd.png) no-repeat 0 0; }
#media { background: #44c2fd url(images/tab_nav_media.png) no-repeat 0 0; }
#games { background: #44c2fd url(images/tab_nav_games.png) no-repeat 0 0; }
#gear { background: #44c2fd url(images/tab_nav_gear.png) no-repeat 0 0; }
</style>
</head>
<body>
<div id="tab_wrap">
<h1>Reviews</h1>
<ul>
<li><a id="music" class="current" title="Music Reviews">Music</a></li>
<li><a href="#" id="film" title="Film Reviews">Film</a></li>
<li><a href="#" id="dvd" title="DVD Reviews">DVD</a></li>
<li><a href="#" id="media" title="Media Reviews">Media</a></li>
<li><a href="#" id="games" title="Games Reviews">Games</a></li>
<li><a href="#" id="gear" class="last" title="Gear Reviews">Gear</a></li>
</ul>
</div>
</body>
</html>
Hi, I know basic html and I am trying to make a simple website for myself. I just can't get the navigation bar at the top of the page to display correctly. Look he pacificnewsnow.com/index2.htm I want to get the 2nd line of the navigation right under the 1st one. I've tried a table and it comes out like this: http://pacificnewsnow.com/index3.htm (The image for the 2 line of the nav bar will be different, but for now, it's just the same.) So, for a professional example of what I'm looking to do, look at this website: katu.com Thank you! I am new to html and web designing. I have an idea for a Navigation Bar but I do not know if its possible or if its been done before. My idea is for a horizontal Nav Bar with a green background. As the visitor puts his or her cursor over the link, a lightning bolt appears from the left side and extends to the right to where the cursor is located. When the cursor moves to the links on the right side it extends, and to the left it retracts. The lightning design will be above the green background but behind the text of the link. Has this ever been done before, if so where can I find it? If not, how can I make one just like it? Are there any navigation generators or 3rd party applications that have pre-set options to allow this as well? hi guys, I am creating a site and i want to have sub navigation. here is a link to what i got so far http://renttheweb.com/cah/ and here is the code Code: #sidebar
{
float: left;
width: 225px;
background-color:#ffffff;
}
#sidebar ul
{
margin:0;
padding:0;
list-style:none;
}
#sidebar ul ul
{
margin:1em 0;
padding:0 1em;
}
#sidebar ul ul ul
{
margin:0.3em 0;
padding:0 0.5em;
}
#sidebar form
{
margin:1em 0;
padding:0 1em;
}
#sidebar h2
{
margin:0;
padding:0;
font-size:1.1em;
}
i got the sub nav working but i want it hidden until the parent link is clicked and then it will expand and show the sub pages under that link. any ideas? CC_DESIGN |
|||||||