The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Small issue with HTML+JavaScript+CSS, Some minor mistake
Aether
post Dec 24 2018, 01:28 AM
Post #1





Group: Members
Posts: 1
Joined: 24-December 18
Member No.: 26,784



Hello fellow human beings,
Apologies for my ignorance / lack of knowledge, thats why i came here to ask people who developing websites way more than ( 8+ hours... ). I think its a minor mistake, but would love to have advice/help. So the problem is:
I have done navigation bar works fine. But when i wanted to include at the same time "dropbtn" for one of the sections ( Products ) something went wrong somewhere.
Thank you for your effort and time. When i get better, you have my word i will return a favour by teaching others like me in the future.
P.S. I have attached whole text folder with full code. Attached File  Products.html ( 3.33k ) Number of downloads: 120

Thank you!

This post has been edited by Aether: Dec 24 2018, 01:37 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 26 2018, 04:58 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



Hello,

QUOTE
I have done navigation bar works fine. But when i wanted to include at the same time "dropbtn" for one of the sections ( Products ) something went wrong somewhere.

You mean you want a dropdown menu? In that case the sub menu should be hidden with CSS, and opened when its heading is hovered. Maybe something like this:

CODE

.dropbtn { cursor: pointer;}
.dropbtn div {
display: inline-block;
position: absolute;
z-index: 3;
left: -1000em;
}
.dropbtn:hover div {left: 10em;}

<li class="dropbtn">Sub menu
<div>
<a href="bookmarks">Bookmarks</a>
<a href="taro">Taro Readings</a>
<a href="digital">Digital Readings</a>
</div>
</li>

Note that I haven't positioned the opened sub menu very well, since the HTML and CSS is slightly unrelated with each other, and I'm not sure which to use. For example, the CSS uses selectors like .Products and .Products-content, but such CLASS values are not used in the HTML.

CODE
<a class="active" a href="...

The above HTML contains a stray "a" character.

CODE
<a href="java script:void(0)" class="dropbtn"></a>

I don't see the purpose of the above empty link? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th February 2019 - 05:02 PM