2015-09-28 3 views
2

Я использую отзывчивый плагин навигации для навигации на этом веб-сайте, над которым я сейчас работаю, а ярлык для усохшей навигации - в файле javascript, и я хочу сделать его кнопкой меню, а не текстом.Javascript img src изменение?

Есть ли способ, я могу это сделать? (Я изменил часть я хочу быть изображение, чтобы «это то, что я хочу быть IMAGE» в коде ниже)

var ResponsiveNav = function (el, options) { 
    var i; 

    /** 
    * Default options 
    * @type {Object} 
    */ 
    this.options = { 
     animate: true,     // Boolean: Use CSS3 transitions, true or false 
     transition: 284,     // Integer: Speed of the transition, in milliseconds 
     label: "THIS IS WHAT I WANT TO BE AN IMAGE",     // String: Label for the navigation toggle 
     insert: "before",     // String: Insert the toggle before or after the navigation 
     customToggle: "",     // Selector: Specify the ID of a custom toggle 
     closeOnNavClick: false,   // Boolean: Close the navigation when one of the links are clicked 
     openPos: "relative",    // String: Position of the opened nav, relative or static 
     navClass: "nav-collapse",   // String: Default CSS class. If changed, you need to edit the CSS too! 
     navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active 
     jsClass: "js",     // String: 'JS enabled' class which is added to <html> element 
     init: function(){},    // Function: Init callback 
     open: function(){},    // Function: Open callback 
     close: function(){}    // Function: Close callback 
    }; 

Большое спасибо.

+0

Я считаю, что вы хотите сохранить путь к изображению там, а затем ссылаться на этот объект, когда вы определяете атрибут src изображения. – Nocturno

+0

Что такое плагин? –

+0

привет, плагин http://responsive-nav.com/ –

ответ

0

Вы добавляете изображение в HTML страницы, дать ему идентификатор, а затем добавить идентификатор к опции customToggle (смотрите пример «myImg» ниже)

например

<img src="myimg.png" id="myImg"> 
<nav class="nav-collapse"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

var nav = responsiveNav(".nav-collapse", { // Selector 
    animate: true, // Boolean: Use CSS3 transitions, true or false 
    transition: 284, // Integer: Speed of the transition, in milliseconds 
    label: "Menu", // String: Label for the navigation toggle 
    insert: "before", // String: Insert the toggle before or after the navigation 
    customToggle: "myImg", // Selector: Specify the ID of a custom toggle 
    closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked 
    openPos: "relative", // String: Position of the opened nav, relative or static 
    navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too! 
    navActiveClass: "js-nav-active", // String: Class that is added to element when nav is active 
    jsClass: "js", // String: 'JS enabled' class which is added to element 
    init: function(){}, // Function: Init callback 
    open: function(){}, // Function: Open callback 
    close: function(){} // Function: Close callback 
}); 
+0

Есть ли способ сделать это изображение исчезнуть при нажатии кнопки меню? так что навигация показывает –

+0

Вы можете добавить прослушиватель событий к своему изображению, чтобы изменить стиль на нем при нажатии: document.getElementById («myImg»). addEventListener («click», function() { this.style.display = 'none'; }); –