Convert a dropdown script to wordpress use WordPress
- REFUNDED
Hi, I need to duplicate a site in wordpress and when they say duplicate they mean duplicate. I'm working with a bootstrap 3 framework. The existing site is bootstrap but not bootstrap 3 (2.6 I think).
Here is the jquery for adding style names to the menu on smaller screen sizes. One feature of these dropdowns is that they go over the content (don't push the content down).
I can include this file (even though it has a lot of other things I don't need) in my themes js folder but "may" need something in my functions file to ensure that the correct classes are found. The framework does have a navwalker php file with it that I can either get rid of or replace as needed to get these working correctly.
Please explain where to put any code that you present (functions, navwalker, template).
/* Functions
-------------------------------*/
// builds the responsive navigation
function initNavigation(){
// initalise drops
initDrops();
//check length of mobileNav the ensure single-use
if(mobileNav.length <= 0){
mobileNav = $('<ul>', {
'class': 'mobile-nav'
});
// grab desktop li elements
var mobileNavDrop = $('<ul>', {
'class': 'drop'
}),
toursLis = toursNav.find('li'),
toursLisCount = toursLis.length,
mainNavLis = mainNav.find(' > li'),
mainNavLisCounts = mainNavLis.length;
// function to process main nav (called after tours)
function processMainNav(){
// loop through main nav LIs
mainNavLis.each(function(){
var $this = $(this),
classes = $this.attr('class'),
text = $.trim($this.text().toLowerCase()),
newMarkup = $('<li>', {
'class': classes
});
// build the new markup
newMarkup.append($this.html());
// home element gets pushed into top of mobile drop
// others into bottom
if(text == 'home'){
mobileNavDrop.prepend(newMarkup);
}else{
mobileNavDrop.append(newMarkup);
}
// drop the count
mainNavLisCounts --;
// check to see if all completed
if (mainNavLisCounts <= 0){
// call build function
buildMobileNav();
}
});
};
// function to do the final build (called after tours and main nav have been processed)
function buildMobileNav(){
var mainLi = $('<li>', {}),
triggerA = $('<a>', {
'href': '#',
'html': 'Menu',
'class': 'trigger'
});
// tie click event to trigger anchose
triggerA.click(function(e){
var $this = $(this),
drop = $this.siblings('.drop');
drop.slideToggle(anSp);
$this.toggleClass('open-trigger');
e.preventDefault();
});
// push drop UL into main Li
mainLi.append(mobileNavDrop);
// push trigger anchor into main Li
mainLi.prepend(triggerA);
// push mainLi into mobile nav
mobileNav.append(mainLi);
//inject into markup at the start of '.top'
$('header .top').prepend(mobileNav);
//also inject into second-level (for tablet layout)
$('header .main').prepend(mobileNav.clone(true));
};
// loop through tours LIs
toursLis.each(function(){
var $this = $(this),
classes = $this.attr('class'),
newMarkup = $('<li>', {
'class': classes
});
// add additional class (to hook styles in)
newMarkup.addClass('tour');
// build new markup
newMarkup.append($this.html());
// push into drop
mobileNavDrop.append(newMarkup);
// push clone into second-level
$('header .main').append(newMarkup.clone(true));
//drop the count
toursLisCount --;
// check to see if completed
if(toursLisCount <= 0){
// call main nav funciton
processMainNav();
}
});
}
function initDrops(){
var mainNav = $('header nav .main'),
dropParents = mainNav.find('li:has(".drop")');
dropParents.each(function(){
var $this = $(this),
drop = $this.find('.drop');
// add drop class
$this.addClass('has-drop');
// trigger hover
$this.hover(
function(){
drop.stop().slideDown(anSp);
},
function(){
drop.stop().slideUp(anSp);
}
)
});
}
}
function initNewsNav() {
var mainLi = $('<li>', {}),
triggerA = $('.trigger');
// tie click event to trigger anchose
triggerA.click(function(e){
var $this = $(this),
drop = $this.siblings('.drop');
drop.slideToggle(anSp);
$this.toggleClass('open-trigger');
e.preventDefault();
});
};
//click event for Filter by trigger
function buildFilterNav(){
// loop through each
filterNav.each(function(){
var $this = $(this),
triggerEl = $this.find('a.trigger');
//tie click event to trigger
triggerEl.click(function(e){
var drop = $(this).siblings('.drop');
drop.slideToggle(anSp);
triggerEl.toggleClass('open');
e.preventDefault();
});
});
}
//click event for Filter by trigger
function buildSortNav(){
// loop through each
sortNav.each(function(){
var $this = $(this),
triggerEl = $this.find('a.trigger');
//tie click event to trigger
triggerEl.click(function(e){
var drop = $(this).siblings('.drop');
drop.slideToggle(anSp);
triggerEl.toggleClass('open');
e.preventDefault();
});
});
}
Answers (1)
Bob answers:
please provide link of the site you want to duplicate.
are you creating custom wordprss theme or modifying existing theme?
It would be really nice if you provide theme.
Connie Taylor comments:
Main site is still in dev too so it's not really live but you can see the action of the menu here - size the window down and it's the top left navigation menu icon with the multicolored dropdown.
[removed at the request of the asker]
I'm thinking that if I use the same script and files that they are showing there will be no question about whether or not it matches.
Bob comments:
It seems you have 3 different layout changes in menu.
The main complication is about mobile menu right? The easy way is to create extra menu for mobile only.
You can create 3 different menu in wordpress backend.(you can say menu locations also)
1. main menu
2. tours menu
3. mobile menu
mobile menu will be hidden on tablets and desktop.
To do so use css class ".visible-xs" of bootstrap 3 for mobile menu.
For colors in mobile menu you can specify class in wordpress backend menu creation screen.
Initially wordrpess do not show control for class adding for each item. You can go to screen option to enable css class.
If you can provide me wordpress theme files I would love to do all there changes, then I will send you it back.
Connie Taylor comments:
Right I have done that already - what I need is the drop down to scroll smoothly as that one does over the content. I would like to duplicate their menu as closely as possible. However all of the plugins I've found, push the content down on mobile.
I can get the styling down however what I cannot do with css is to create the toggle element that can be used wherever I need it.
Bob comments:
is your wordpress site online? I would like to see it. If possible please provide me your wordpress file I would like to modify it in my localhost.
If your wordperss site is online then I can easily figure out the problem and write own jquery to apply desired effect.
Connie Taylor comments:
[URL removed at request of Asker] The menus in question are the top left and between 767px and 990px the middle of the screen. Which wordpress file do you need?
Bob comments:
It would be nice if i can get all files. But right now I am trying with what i can download from above url.
Bob comments:
the main files which require are all css, all js, header.php, index.php, page.php, footer.php and functions.php and necessary image files. so it's better send me all theme in zip or rar format I will fix it and show you where i did changes.
Bob comments:
I am going to setup my code on my server.
Please have a look at http://wp-lovers.com/japan/
It is set up in wordpress.
Bob comments:
You only need to create two menus of wordpress other things are done by your javascript and html automatically.
Bob comments:
You only need to do changes in functions.php and header.php file.
Please note right the theme I have on my server is taking images from your server.
Please give me above files so I can suggest you where you should do changes.
Connie Taylor comments:
Sorry was the middle of the night here - fell asleep.
OK - the code on your site is from the static pages dev site -<em><strong> not</strong></em> my wordpress theme. I want the wordpress theme menus to act like their menus (in the two custom menu locations described above).
will upload or send my "wordpress" files and their "static site" files (css, js)
All I want is the js that creates the toggle and dropdown and makes them act the way they do put into the wordpress nav walker.
Connie
Connie Taylor comments:
Can't seem to upload files (only images here). will send you a message with my email.
Connie
Bob comments:
I want to tell you that using your static html and javascript code you can easily integrate it in wordpress.
My email id is [email protected] please send me files here.