Forum Moderators: not2easy

Message Too Old, No Replies

Sliding menu without using jQuery

         

toplisek

8:12 am on Jun 2, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I like to use sidebar without jQuery as it is more native replicate.
It seems very good script to do this my example.
There is an issue it uses body CSS for background inside sidebar.
Can be moved this background into Javascript or CSS?
Check <ul id="menu"> and <body>. It uses body background not id inside <ul id="menu">.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Mobile Menu Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles1.css">
</head>
<!-- https://example.com/2014/01/building-smooth-sliding-mobile-menu/ -->

<body>

<ul id="menu">
<li><a title="Home" href="#">Home</a></li>
<li><a title="About Me" href="#">About Me</a></li>
<li><a title="Contact Me" href="#">Contact Me</a></li>
</ul>

<div id="page">

<header>
<h1>My New Site</h1>
<a href="#" id="toggle-menu">Menu</a>
</header>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/javascript1.js"></script>

</body>
</html>

[edited by: not2easy at 2:58 pm (utc) on Jun 2, 2016]
[edit reason] charter terms [/edit]

not2easy

3:18 pm on Jun 2, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



If we could see what the CSS says it would help to understand what's happening. Keep in mind that .js normally deals with functions, not appearance. The appearance should be within the CSS, but then it depends on what elements have been assigned what attributes. What does the CSS have for #menu ul background?

BTW if the Doctype is html (html5) then you don't want that <html xmlns="http://www.w3.org/1999/xhtml"> tag in there. A simple <html> will do or you can use <html lang="xx">

Have you validated this html and css? That would show you any basic problems such as the <html> error.