मुझे यहां इस ड्रॉपमेनू में समस्या है: पृष्ठभूमि

समस्या यह है कि यह मुझे मेरे सबमेनू की श्रेणियां नहीं दिखाता है,

नवबारसुबिटेम.जेएस:

import React from 'react'
function NavBarSubItem(props)
{
return(
    <div className={props.subLi.liClassName}>
        <a className={props.subLi.aClassName} href={props.subLi.href}> </a>
    </div>
)
}
export default NavBarSubItem

नवबरीटेम.जेएस:

import React from 'react'
import NavBarSubItem from './NavBarSubItem'
function NavBarItem(props)
{
function responsitiveMenu(){
    var x = document.getElementById("idTopnav");
    var y = document.getElementById("idIconItem");
    if(x.className === "topNav") {
        x.className += "-responsitive";
        y.className = "fa fa-fw fa-reply"
    }else{
        x.className += "topnav";
        y.className= "fa fa-fw fa-bar"      
    }
}

const NavBarSubItems = props.li.subItems.map(item => <NavBarSubItem key={item.id} subLi={item}/>);
return(
    <div className={props.li.liClassName}>
      <a className={props.li.aClassName} href={props.li.href} onClick={props.li.liClassName === "responsitive-icon" ? responsitiveMenu : ""} ><i className={props.li.icon} id={(props.li.liClassName === "responsitive-icon") ? "idIconItem":""}></i>{props.li.text}</a>
        <div className="dropDownItem-content">
            {props.li.liClassName === "dropDownItem" ? NavBarSubItems: ""}
        </div>
    </div>
)
}
export default NavBarItem

नवबारब्लॉक.जेएस:

import React from 'react'
import NavBarItem from './NavBarItem'
function NavBarBlock(props){
const navBaritems = props.block.navItems.map(item => <NavBarItem key={item.id} li={item}/>);
return(
    <div className={props.block.id}>
        {navBaritems}
    </div>
)
}
export default NavBarBlock

नवबार.जेएस:

import React from 'react'
import NavBarData from '../data/NavBarData'
import NavBarBlock from './NavBarBlock'
import './Nav.css'
class NavBar extends React.Component {
render (){
const navBarBlock = NavBarData.map(item=><NavBarBlock key={item.id} block={item}  
        img={item.imgSrc}></NavBarBlock>) 
    return (
        <nav className='topNav' id='idTopNav'>
            <h2>{navBarBlock}</h2>
        </nav>
    )
    }
    }
    export default NavBar

अंत में मैंने अपना ऐप.जेएस में डाल दिया अगर आपको मेरे सीएसएस कोड की आवश्यकता है तो मैं डालूंगा, मैं इस समस्या को कैसे हल कर सकता हूं? धन्यवाद!

0
Raffaele Scardamaglia 26 अगस्त 2020, 01:28

1 उत्तर

सबसे बढ़िया उत्तर

जब मैं एक ड्रॉपडाउन मेनू के बारे में सोचता हूं, तो मैं इस कोड और हमेशा सनी से क्लासिक फ्रैंक रेनॉल्ड्स अंडे के बारे में सोचता हूं (बस एक कूदने वाला बिंदु!)

मेरे नेवबार घटक के अंदर प्रस्तुत करना:

<div className="dropdown-content">
    <a href="">Utility</a>
    <a href="">Utility2</a>
    <a href="">Utility3</a>
</div>

मेरे navbar.css के अंदर

/* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

इस कोड के साथ, आपको एक बुनियादी ड्रॉपडाउन मेनू मिलेगा। जिसके साथ, आप वांछित स्टाइल और कार्यक्षमता लागू कर सकते हैं।

0
Dharman 31 अगस्त 2020, 16:09