About .CSS code

[himalay137]

Hi everyone,
I'm a new member here. I have a blog in blogger.com. I want to apply dropdown menu. I'm trying with matt menu. without hosting how can I download .css and .js files. Can I use the code of .css and .js files. in my blog. If it is possible where do I paste the code. If possible without .css nad .js then how...? Please help me to resolve it.


thanks...

[Snookerman]

Do you mean you can't upload files to the server? If you can, just link to them in the head section of your page like this:

<link type="text/css" href="path_to_file/style.css" rel="stylesheet">
<script type="text/javascript" src="path_to_file/script.js"></script>

If you can't upload the files, you can put them on the page itself:

<style type="text/css">
style code here
</style>
<script type="text/javascript">
script code here
</script>
If this is not what you mean, please try to explain it in more detail.

Good luck!

[himalay137]

Thnx Snookerman,
I use this code(given below) without downloading jqueryslidemenu.css and jqueryslidemenu.js files from dynamicdrive.com. first time it works but now it looks like a long list.
please visit my blog.
http://smartphonemania.blogspot.com/


<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js"></script>

[Snookerman]

Even if it would work, I don't think DD is too keen about you using their bandwidth. You're gonna have to find another way to upload your files, try 110mb (http://www.110mb.com/), it's absolutely free.

Good luck!

[himalay137]

<style type="text/css">
style code here
</style>
<script type="text/javascript">
script code here
</script>


When I use these format then I got a error msg:
XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".
what can I do? pls help...
thnx

[himalay137]

Hi Snookerman,
when I paste the code of jqueryslidemenu.js (http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js) files in blogger.com HTML editor between <script type=”text/javascript”> and </script> tag then a error message is appeared :-


Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

Here is the code. Is there any error?..


<script type="text/javascript">
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
</script>

Thnx

[Snookerman]

First:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.
Second, make sure you use the same doctype as the one used on the DD demo page.

Good luck!

[himalay137]

Dear Snookerman
My DD script link is here:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

It includes one .CSS file
http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.css
and one .JS file
http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js

when I use this code sometimes it works.

<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js"></script>

when I paste CSS code and use the link of JS code it works (sometimes not).

<style type='text/css'>

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
</style>


<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js' type='text/javascript'/>


But when I paste the CSS and the JS code it shows an error which I described earlier.

Here is my site link:
http://smartphonemania.blogspot.com/
Please check.

Thanks

[himalay137]

hi eros1234
first time I tried with your format. but sometimes the dropdown menu appear, most of time not.if u visit my site u can understand. the .CSS code is ok. but the .JS code creates problem. when I use its code I got an error. I have no domain and I use blogger.com. So I can't download the CSS and JS file.what should I do?
thnks

[himalay137]

hi snookerman,
doctype of my site is XHTML 1.0 Strict. is it ok? I want to use jQuery Multi Level CSS Menu #2 (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P130/) But it doesn't show any level.
Pls visit my site and tell me... what to do?
http://smartphonemania.blogspot.com/
thnx

[himalay137]

hi snookerman,

my 1st problem was solved. thnx for ur solution. but now i face another proble.
drop down menu appears behind the google ads. pls help me.
visit my site. http://smartphonemania.blogspot.com/
thnx

DD script link: jQuery Multi Level CSS Menu #2 (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P130/)