in dreamweaver werkt het goed in browser niet

kiekwebsite · 12 nov 2015

ik heb een menu gemaakt in dreamweaver daar werkt hij precies hoe ik wil maar in de browser niet. Weet iemand hoe dat kan?
Dit is zijn mijn codes:

HTML:

HTML:

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="file:///Macintosh HD/Users/janedoe/Downloads/cssmenu 2/styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="file:///Macintosh HD/Users/janedoe/Downloads/cssmenu 2/script.js"></script>
   <title>mijn menu</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active has-sub'><a href='#'><span>WELKOM</span></a>
       <ul>
       <li <a href='#'><span>UITGANGSPUNTEN</span></a> </li>
       </ul>
   <li class='active has-sub'><a href='#'><span>PRIVE</span></a>
      <ul>
         <li <a href='#'><span>VOOR WIE?</span></a> </li>
         <li <a href='#'><span>KINDEREN NEE/JA?</span></a> </li>
         <li <a href='#'><span>HOE GAAN WE TE WERK?</span></a> </li>
         <li <a href='#'><span>TARIEVEN</span></a></li>
      
      </ul>
         <li class='active has-sub'><a href='#'><span>ZAKELIJK</span></a>
      <ul>
         <li <a href='#'><span>BURN-OUT PREVENTIE VOOR HOOGOPGELEIDE VROUWEN</span></a> </li>
         <li <a href='#'><span>TARIEF</span></a> </li>
         
       </ul>
            <li class='active has-sub'><a href='#'><span>OP MAAT</span></a>
      <ul>
         <li <a href='#'><span>BUITEN </span></a> </li>
         <li <a href='#'><span>SABBATICAL VOORBEREIDING</span></a> </li>
   
       </ul>
  
   <li class='active has-sub'><a href='#'><span>NAAM</span></a>
   
   <li class='active has-sub'><a href='#'><span>CONTACT</span></a>
</ul>
</div>

</body>
<html>

CSS:

Code:

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: auto;
font-family: 'Fjalla One', sans-serif;
  color:#333;
  font-size: 13px;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
	padding: 15px 20px;
	
	cursor: pointer;
	z-index: 2;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
	  color:#333;

	color: #000000;
	background:#FFF;
	
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color:#333;
  background: #FFF;
  
}


  

#cssmenu > ul > li.open > a {
  color:
  #F00;
 
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom:none;

}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
      color:
  #F00;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
       color:
  #F00;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul a {
  cursor: pointer;
  border-bottom:none;
  border-left: none;
  border-right: none;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 10px;
  line-height: 5px;
  color:#333;
  background: #FFF;
 
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom:none;
  border-left: none;
  border-right: none;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 10px;
  line-height: 5px;
  color:#333;
  background: #FFF;
 
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background:
  #FFF;
  color: 
  #F00;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow:none;
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;

}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: none;
 
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
 
 
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: none;
  border-left: none;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: none;

}

JQUERY:
[js]
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});

$('#cssmenu>ul>li.has-sub>a').append('');

(function getColor() {
var r, g, b;
var textColor = $('#cssmenu').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
}
else
{
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
}
})();

function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;

if(max == min){
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return l;
}
});
} )( jQuery );[/js]

pcexpert · 13 nov 2015

Bovenaan zie ik dat de LI (List Item) tags niet gesloten worden.
Nu staat er dit:
<li <a href='#'>UITGANGSPUNTEN</a> </li>

En ik denk dat het dit moet worden:
<li><a href="#">UITGANGSPUNTEN</a> </li>

Ok vind ik het raar dat je je tekst niet in een tekst tag zoals H of P zet. Nu staat het als een preprocessed tekst. Zou je niet beter in je stylesheet dan een class maken voor een speciaaal type P die dan gebruikt wordt voor de namen? Dan kan je ineens ook gebruik maken van CSS om automatisch die tekst te kapitaliseren zodat je niet hoeft in CAPS te typen in je HTML file.

Tha Devil · 22 nov 2015

Het probleem zit hem waarschijnlijk in de paden naar je CSS en Javascript.

Er staat nu dit: "file:///Macintosh HD/Users/janedoe/Downloads/cssmenu 2/script.js", dat is een verwijzing naar een bestand dat op jouw Mac bestaat.

Als je deze bestanden upload naar jouw hosting dan zul je ook het pad goed moeten hebben. Wat je zou kunnen doen is een mapje "css" en een mapje "js" maken en daar de bestandjes in zetten.

De (relatieve) verwijzingen worden dan "js/script.js" en "css/styles.css".

pcexpert · 22 nov 2015

Tha Devil zei:
Het probleem zit hem waarschijnlijk in de paden naar je CSS en Javascript.

Er staat nu dit: "file:///Macintosh HD/Users/janedoe/Downloads/cssmenu 2/script.js", dat is een verwijzing naar een bestand dat op jouw Mac bestaat.

Als je deze bestanden upload naar jouw hosting dan zul je ook het pad goed moeten hebben. Wat je zou kunnen doen is een mapje "css" en een mapje "js" maken en daar de bestandjes in zetten.

De (relatieve) verwijzingen worden dan "js/script.js" en "css/styles.css".

Hmm. Daar dacht ik ook aan. Inderdaad. Lokale paden kun je niet gebruiken natuurlijk. Als je dan toch niet zeker bent via reatieve paden, kan je toch ook url's gebruiken voor paden?

in dreamweaver werkt het goed in browser niet

kiekwebsite

Nieuwe gebruiker

pcexpert

Gebruiker

Tha Devil

Moderator

pcexpert

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy