Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Sliding menu without using jQuery

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

Senior Member

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

joined:Oct 25, 2006
posts: 1103
votes: 1

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">

<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">
<!-- https://example.com/2014/01/building-smooth-sliding-mobile-menu/ -->


<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>

<div id="page">

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

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


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

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

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
votes: 314

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.