css - Foundation top-bar isn't working -


I'm trying to use the foundation to create a navigation menu. I load black content with my content , But some features do not work. For example, the drop down menu does not work when the mouse slides on it. Besides, the proper mouseover effect is not working, am I forgetting something?

This is my code 

  & lt; Head runat = "server" & gt; & Lt; Title & gt; & Lt; / Title & gt; & Lt; Asp: ContentPlaceHolder ID = "head" runat = "server" & gt; & Lt; / ASP: ContentPlaceHolder & gt; & Lt; -! Jquery - & gt; & Lt; Script src = "js / jquery-1.11.2.min.js" type = "text / javascript" & gt; & Lt; / Script & gt; & Lt; -! Foundation - & gt; & Lt; Script src = "js / foundation.min.js" type = "text / javascript" & gt; & Lt; / Script & gt; & Lt; Link rel = "stylesheet" href = "css / foundation.css" type = "text / css" /> & Lt; Link rel = "stylesheet" href = "css / normalize.css" type = "text / css" /> & Lt; / Head & gt; & Lt; Body & gt; & Lt; Form id = "form1" runat = "server" & gt; & Lt; Div & gt; & Lt; Div class = "included-to-grid sticky" & gt; & Lt; Nav class = "top-bar" role = "navigation" data-option = "is_hover: true" & gt; & Lt; Ul class = "title-area" & gt; & Lt; Li class = "name" & gt; & Lt; H1 & gt; & Lt; A href = "#" & gt; VoIP Innovation & lt; / A & gt; & Lt; / H1> & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Section class = "top-bar-section" & gt; & Lt; Ul class = "left" & gt; & Lt; Li class = "is dropdown" & gt; & Lt; A href = "#" & gt; Service & lt; / A & gt; & Lt; Ul class = "dropdown" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Origin & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Termination & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; E 911 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Hosted billing & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navy 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navi 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navi 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navi 5 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Section & gt; & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; Asp: ContentPlaceHolder id = "content placeholder 1" runat = "server" & gt; & Lt; / ASP: ContentPlaceHolder & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; Script & gt; $ (Document) .foundation (); & Lt; / Script & gt;

This is working.

First of all, you must keep the data topbar attribute in your nav element.

Second, you have put li with the menu in your code:

Full HTML: 

  & lt; Nav class = "top-bar" data-topbar role = "navigation" data-option = "is_hover: true" & gt; & Lt; Ul class = "title-area" & gt; & Lt; Li class = "name" & gt; & Lt; H1 & gt; & Lt; A href = "#" & gt; VoIP Innovation & lt; / A & gt; & Lt; / H1> & Lt; / Li & gt; & Lt; Li class = "toggle-topbar menu-icon" & gt; & Lt; A href = "#" & gt; & Lt; Period & gt; From the menu & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Section class = "top-bar-section" & gt; & Lt; Ul class = "left" & gt; & Lt; Li class = "is dropdown" & gt; & Lt; A href = "#" & gt; Service & lt; / A & gt; & Lt; Ul class = "dropdown" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Origin & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Termination & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; E911 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Hosted billing & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navy 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navi 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navi 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Navi 5 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Section & gt; & Lt; / Neo & gt;

Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more