2 Replies - 1046 Views - Last Post: 17 November 2011 - 12:06 PM

#1 michibahn   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-November 11

Help with CSS and HTML modification

Posted 16 November 2011 - 07:41 AM

Hi guys,

I'm really new to web development and I need your help in getting my sample page modified.

I've downloaded a sample drop down menu template and I just need it to modify to meet my needs.

Attached is the files. Basically, I just need to do the following:

1. When I hover the mouse to the "Reports" menu, I want the drop down menu to show not on the green arrow.

2. If I choose 111111111 in the drop down menu, the 1.pdf file should show right below the page menu (in the white area of the page> please JPG attachment) not in a new page so that I can still open new reports 222222 and 3333333 without hitting the "back" button in the browser.

I can't upload the files due to the size limit. So I'm inserting the index.html code and the page screenshot Appreciate if you can help me on this.

<!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=iso-8859-1" />
<title>NGK Inventory Report by VLS Logistic services - www.vlslogistics.com</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});
</script>
<style type="text/css">
body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
	background: #ddd url(body_bg.gif) repeat-x;
}
.container {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
#header {
	background: url(header_bg.gif) no-repeat center top;
	padding-top: 120px;
}
#header .disclaimer {
	color: #999;
	padding: 100px 0 7px 0;
	text-align: right;
	display: block;
	position: absolute;
	top: 0; right: 0;
}
#header .disclaimer a {	color: #ccc;}
ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}
#header img {
	margin: 20px 0 10px;
}
</style>

</head>

<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf">11111111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>


</body>
</html>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Help with CSS and HTML modification

#2 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1562
  • View blog
  • Posts: 2,195
  • Joined: 24-August 11

Re: Help with CSS and HTML modification

Posted 17 November 2011 - 10:12 AM

<select> is an html dropdown menu, and it will work without using jQuery and that long list of styles (although it won't drop down without some javascript fired on the onmouseover event). If you're set on using this code you've found, I would recommend spending some time learning jQuery to understand what those scripts are doing (although if you don't know anything about javascript, i don't know how much it will help). It just seems to me that for a new web developer, you would gain a lot more by learning it then having us fix it.

That being said, here's a basic way of doing this with a select:

place an image tag where you want the image to show up, with src="", and id equal to whatever you want (i'll use "whatever)

<img id="whatever" alt="" src="" />



this will grab the image by its id, and set it's source based the selected dropdown option.
place it inside <script> tags
function changeImage(imageNo)
{
    document.getElementById("whatever").src = imageNo + ".jpg";
}



and here's how to fire that from the select.
<select id="Select1">
    <option onclick="changeImage(1)">Thingy1</option>
    <option onclick="changeImage(2)">Thingy2</option>
    <option onclick="changeImage(3)">Thingy3</option>
</select>



Again, this isn't clean, it's just a simple way of doing what you're trying to do (based on the assumption that your images are really named 1.jpg, 2.jpg, and 3.jpg). You really need to research javascript and jquery if you want to use that code you found. i obviously don't know how much you know/don't know about html/css/javascript, et al. hope this helps.
Was This Post Helpful? 0
  • +
  • -

#3 michibahn   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-November 11

Re: Help with CSS and HTML modification

Posted 17 November 2011 - 12:06 PM

thank you very much. i really appreciate your advise in learning web development. i will try your codes and learn from it.

thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1