Well, have a think about it. If you just want to see what it looks like then the code I have provided will do that.
If you then decide that this is what you want to do, then let me know and I’ll see if I can flesh out the demo some more.
I’d rather not do it until you’re sure this is what you want, as it would otherwise be (quite a lot of) wasted work.
Maybe you could start a thread in General Web Dev and get a few opinions if this is a good idea or not (I say it isn’t, but you knew that already).
Hello, i tested this now and this seems to be exactly what i want. So if you want to and have the time please show the last step. Thank you.
Hi,
Here you are:
<!doctype html>
<html>
<head>
<base href="http://test3.fcab.se/responsive_menu_test/responsive_menu_flat_two/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="utf-8">
<title>Multi Responsive Menu Flat Two</title>
<meta name="generator" content="FCAB - Webdesign">
<style>
div#container{
width: 970px;
position: relative;
margin: 0 auto 0 auto;
text-align: left;
}
body{
background-color: #111111;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
line-height: 1.1875;
margin: 0;
text-align: center;
}
</style>
<link href="Mulit_responsive_menu_flat_two.css" rel="stylesheet">
<style>
#wb_indexText1{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_indexText1 div{
text-align: left;
}
</style>
<!-- Responsive menu -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/responsivemultimenu.js"></script>
<script src="js/activelink_main_sub.js"></script>
<link href="css/responsivemultimenu.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#container').attr('id','content');
$("#content").css("cssText", "max-width: 970px !important;");
$("#content").css({ 'position': 'relative', 'margin': '0 auto 0 auto', 'text-align': 'left'});
});
</script>
<style>
@media screen and (min-width: 900px) {
.ribbon
{
/*Show the menu*/
}
}
.ribbon, .rmm-mobile, .rmm ul {
z-index: 100000;
}
</style>
</head>
<body>
<div id="container">
<div id="wb_indexText1" style="position:absolute;left:28px;top:400px;width:280px;height:37px;z-index:2;text-align:left;">
<span id="page" style="color:#FFFFFF;font-family:'Trebuchet MS';font-size:29px;">HOME</span></div>
</div>
<!-- Responsive menu -->
<div class="ribbon">
<div class="rmm style">
<ul>
<li>
<a href="./index.html">HOME</a>
<ul>
<li>
<a href="./sub1.html">Home Sub 1</a>
</li>
<li>
<a href="./fsub2.html">Home Sub 2</a>
</li>
</ul>
</li>
<li>
<a href="www.google.com">PROJECTS</a>
<ul>
<li>
<a href="./ikea-norway.html">IKEA - NORWAY</a>
</li>
<li>
<a href="./fastec-sweden.html">FASTEC - SWEDEN</a>
</li>
</ul>
</li>
<li>
<a href="#">CLIENTS</a>
<ul>
<li>
<a href="./ikea.html">IKEA</a>
</li>
<li>
<a href="./fastec.html">FASTEC</a>
</li>
</ul>
</li>
<li>
<a href="./contactus.html">CONTACT US</a>
</li>
<li>
<a href="./webshop.html">WEBSHOP</a>
</li>
<li>
<a href="#">ADMIN</a>
<ul>
<li>
<a href="./staff.html">STAFF</a>
</li>
<li>
<a href="./documents.html">DOCUMENTS</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
var page = $("#page").text(),
menu = $(".ribbon").clone();
$(window).on("resize", function(){
if ($(".rmm-mobile").length){
var els = $("ul.rmm-submenu");
els.each(function(){
if($(this).prev(".rmm-dropdown").text() === page){
$(".rmm-toggled-button").trigger("click");
$(this).prev(".rmm-dropdown").trigger("click");
} else {
$(this).remove();
}
});
$(".ribbon").addClass("dirty")
} else {
if($(".ribbon").hasClass("dirty")){
$(".ribbon").removeClass("dirty");
$(".ribbon").html(menu.clone());
responsiveMultiMenu();
}
}
});
setTimeout(function(){
$(window).trigger("resize");
}, 100);
</script>
</body>
</html>
Hello Pullo, and thank you so much for this, i’l test it later and get back to you.
Thank you.
Hello Pullo i tested this now. So i added the script to every page in the demo: http://test3.fcab.se/responsive_menu_test/responsive_menu_flat_two/index.html but now i cant get to the sub menu in mobile view at all. But anyway you don’t have to spend any more time on this if you don’t want to. I’l try to work on it my self. And i have also started to build a new type of menu. But thank you so much for all of your help.
Regards
//Patrik.
If you can remove whatever plugin is minifying the HTML it’ll be easier to offer an opinion.
Well this happend after i added the new (your) script to the pages, i dont know wy. I don’t think avery page is this way.
Oh dear.
Well, if you can zip up the set of files you are using and stick them somewhere for me to download, I don’t mind seeing what can be done.
However, as before, I don’t like this approach. You are fighting the plugin and it’s always going to be fiddly and error-prone.
OK, here you can download all the files i use for this menu.
Please also read the included info.txt file.
Thank you.
Download link
Hi Partik,
Can you have a look at the attached file and let me know if HOME and CLIENTS behave as expected?
These are the only two menu points I modified. You should be able to navigate between then and see the appropriate menu.
patrik.zip (25.3 KB)
Hello Pullo, and thank you for this. The problems i found now is:
-
If i click on a menu link in bigscreen menu, and if i then resize the screen so that the mobile menu is toggled then
all the + sub menu indicators are missing. If i refrech CTRL+F5 then they will return.
-
If i refrech the page in bigscreen viwe and then resize the screen so that the mobile menu is toggled then i click a link that has submenu, this is working
but the when i click the back link all the + sub menu indicators are missing (exept the on the current link).
And if i click a link that should have sub menus the only thing that hapens is that the mobile menu will close and then the top ribbon
(hamburger button can not be clicked).
Other than this it’s working as i want it to.
Thank you.
Not sure I understand this. Do you mean that in mobile view you want the “+” signs to be visible and the menu points to be expandable?
Yes, i’m sorry i’ts so hard to explain in ant siple way.
Hi,
Does this solve the first problem now?
Do HOME and CLIENTS behave as expected?
patrik.zip (25.1 KB)
Hello Pullo. Yes this is working as i want it to now. The only problem i can find is if i add this code to every page
that has sub pages and if i click the back button from clients then these other links wont work.
-
I click the Home link in bigscreen view then i resize the window so that the mobile view is toggled.
-
I click the clients link in mobile view, this will direct me to the clients.html page and also show the sub menu
(This just the way i want it, Perfect).
-
I click the back button when on clients.html page. Now if i click eg, the Projects link i will not be directed to the
projects.html page, however the sub menu for projects will show.
-
But if i then click the Home link and then i click the Projects link, now i will be directed to projects.html and the sub menu
for projects will also be shown, but if i click the back button it’s the same as before (point 3).
Thank you.
Regard.
//Patrik.
Hi Patrik,
Sorry for the delay in replying. I’ve been pretty busy.
I couldn’t reproduce your problem my end. Could you please zip up the files you are using and upload them to this thread.
Hello, no problem. I will zip up the files later. Just one thing: should this script be in all the pages, even the pages that has no submenu? If so i was thing about puting this code in an external .js file an include it before the tag in all the files. Would this be OK? Thank you.
Hey Patrik,
To be honest, I’m still confused about what you want to achieve.
Once we have worked out what we are doing, there is no reason that this script should not be in its own file.
OK, i now have a demo for us to use here: http://test3.fcab.se/responsive_menu_test/from_pullo/responsive_menu_flat_two_org/index.html
I made a external .js file for this now (link_fix.js) and added it to every page.
Try this if you are on index.html page and mobile view:
-
Click the PROJECTS link, this will direct you to projects.html and show the submenu for this link (This is OK).
-
Now click the BACK link.
-
Now click the CLIENTS link, this will only show the submenu for Clients link but i am not directed to clients.html page. Same if i click the ADMIN link.
I made a ftp account for us to use. Here are the login details:
I will PM you this.
Hi Patrik,
I logged on to your server and altered the script.
Can you try it now? The menu should (at least in this regard) behave as you want.